CSS：div中文字换行设置

最新推荐文章于 2024-12-12 14:50:11 发布

Alice_LMY

最新推荐文章于 2024-12-12 14:50:11 发布

阅读量2.4k

点赞数 1

分类专栏：记录文章标签： css 前端 html

原文链接：https://blog.csdn.net/qq_45112637/article/details/114527710

版权

记录专栏收录该内容

26 篇文章 0 订阅

订阅专栏

word-break:break-all;只对英文起作用，以字母作为换行依据
word-wrap:break-word; 只对英文起作用，以单词作为换行依据
white-space:pre-wrap; 只对中文起作用，强制换行
white-space:nowrap; 强制不换行，都起作用
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;不换行，超出部分隐藏且以省略号形式出现（部分浏览器支持）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        width: 30px;
        /* height: 30px; */
        border: 1px solid rgb(71, 50, 50);
        margin-top: 20px;
      }
      /*只对英文起作用，以字母作为换行依据*/
      .p1 {
        word-break: break-all;
        width: 150px;
      }
      /*--只对英文起作用，以单词作为换行依据*/
      .p2 {
        word-wrap: break-word;
        width: 150px;
      }
      /*只对中文起作用，强制换行*/
      .p3 {
        white-space: pre-wrap;
        width: 150px;
      }
      /*强制不换行，都起作用*/
      .p4 {
        white-space: nowrap;
        width: 10px;
      }
      /*不换行，超出部分隐藏且以省略号形式出现*/
      .p5 {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 100px;
      }
    </style>
  </head>

  <body>
    <div class="p1">
      hello world hello world hello world hello world hello world
    </div>
    <div class="p2">
      hello world hello world hello world hello world hello world
    </div>
    <div class="p3">
      hello world hello world hello world hello world hello world
    </div>
    <div class="p4">
      hello world hello world hello world hello world hello world
    </div>
    <div class="p5">
      hello world hello world hello world hello world hello world
    </div>
  </body>
</html>