HTML5基础加强css样式篇（CSS3 文本 - 英文单词截断与不截断：word-break，overflow-wrap，white-space）（四十二）

最新推荐文章于 2024-11-11 12:35:21 发布

咸鸭蛋炒饭

最新推荐文章于 2024-11-11 12:35:21 发布

阅读量4.2k

点赞数

分类专栏： HTML5基础篇文章标签： css html5 经验 html css3

本文链接：https://blog.csdn.net/u010853130/article/details/69568175

版权

HTML5基础篇专栏收录该内容

121 篇文章 8 订阅

订阅专栏

<!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>