overflow-wrap: break-word； word-break: break-all； word-break: keep-all； white-space: nowrap；区别

最新推荐文章于 2023-04-21 13:50:18 发布

Gabriel_wei

最新推荐文章于 2023-04-21 13:50:18 发布

阅读量3.8k

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/Gabriel_wei/article/details/108490567

版权

前端专栏收录该内容

183 篇文章 6 订阅

订阅专栏

忘记在哪转载的了，只做记录

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style type="text/css">
      body {
        font-size: 18px;
      }
      p,
      h3 {
        font-family: "Microsoft YaHei UI", tahoma, Hiragino Sans GB, sans-serif;
        font-weight: bold;
      }
      .box {
        width: 300px;
        height: 50px;
        border: 1px solid red;
      }
      .box1 {
        /*垂直空间不足时，“强制换行”*/
        overflow-wrap: break-word;
      }
      .box2 {
        word-break: break-all;
      }
      .box3 {
        word-break: keep-all;
      }
      .box4 {
        /*文本内容不换行
               使用场景： 广告语，文章标题
            */
        white-space: nowrap;
      }
    </style>
  </head>
  <body>
    <h3>提示：通过浏览器调整.box宽度，查看效果</h3>
    <p>overflow-wrap: break-word; 浏览器自行决定在何处“截断”单词<br /></p>
    <div class="box box1">Hello World Hello,World Hooooooooooole</div>
    <p>word-break: break-all; 强行截断单词！<br /></p>
    <div class="box box2">Hello World Hello,World Hooooooooooole</div>
    <p>word-break: keep-all; 不准许“截断” 单词！！<br /></p>
    <div class="box box3">Hello World Hello,World Hooooooooooole</div>
    <p>white-space: nowrap; 永不换行<br /></p>
    <div class="box box4">Hello World Hello,World Hooooooooooole</div>
  </body>
</html>

Gabriel_wei

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
overflow-wrap: break-word； word-break: break-all； word-break: keep-all； white-space: nowrap；区别

忘记在哪转载的了，只做记录<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <title></title> <style type="text/css"> body { font-size: 18px; } p, h3 { font-fa
复制链接

扫一扫