07CSS3文本——overflow-wrap & word-break

最新推荐文章于 2024-06-26 15:38:36 发布

远近2021

最新推荐文章于 2024-06-26 15:38:36 发布

阅读量9.8k

点赞数

分类专栏： # css3学习 htmlcss学习园地文章标签： css3

本文链接：https://blog.csdn.net/weixin_47197906/article/details/119609556

版权

htmlcss学习园地同时被 2 个专栏收录

91 篇文章 6 订阅

订阅专栏

css3学习

25 篇文章 3 订阅

订阅专栏

文章目录

1、overflow-wrap（word-wrap）
2、word-break

overflow-wrap 和 word-break 都可以起到对单词的换行作用，前者用来表明是否允许浏览器在单词内进行断句，例如出现了一个很长的 url 或者单词，由于找不到自然段句点空格或标点符号而产生了溢出，这时候就可以使用 overflow-wrap 来解决这个问题； word-break 则是用于表明怎样在单词内进行断句。

1、overflow-wrap（word-wrap）

word-wrap: normal|break-word;

overflow-wrap 常用的有两个取值：

normal：只在允许的断字点换行（浏览器保持默认处理）。
break-word：允许在长单词或URL地址内进行换行。

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .div1 {
            margin: 50px;
            border: 1px solid;
            width: 100px;
            /*对单词换行，允许在长单词内进行换行，不会拆散短单词*/
            overflow-wrap: break-word;
        }
        .div2 {
            margin: 50px;
            border: 1px solid;
            width: 100px;
            /*对单词换行，浏览器保持默认处理*/
            overflow-wrap: normal;
        }
    </style>
</head>
<body>
    <div class="div1">Hello world!veryveryveryveryverylongword isn't it?</div>
    <div class="div2">Hello world!veryveryveryveryverylongword isn't it?</div>
</body>

在这里插入图片描述
可以看到，句子中出现了一个很长的单词，属性 overflow-wrap 设置为 break-word，即允许从中间断开，没有出现溢出的情况，在句子开始的 Hello World！中，可以看到这两个单词是处于两行，也就是说如果把它们放在一行内会出现溢出的情况，break-word 不会拆散短单词，所以这里出现了换行；属性 overflow-wrap 设置为 normal 时，采用浏览器默认的换行方式，出现了溢出。

2、word-break

word-break 有三个取值：

word-break: normal|break-all|keep-all;

在这里插入图片描述

normal：保持浏览器默认换行方式
break-all：表明对于 non-CJK（非中文/日文/韩文）文本，可在任意字符间断行
keep-all：CJK 文本不断行，non-CJK 文本表现同 normal 。展开一点来说就是只能在半角空格或连字符处换行,也就是说，keep-all 只能在语句的正常语句起始处和单词起始处换行，如果non-CJK 单词过长，使用值 keep-all 就有可能造成文本框溢出。

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .item1 {
            margin: 20px;
            border: 1px solid;
            width: 100px;
            /*浏览器默认换行是 CJK 换行*/
            /*non-CJK 换行方式是在半角空格连字符的地方换行，长单词不换行。 */
            word-break: normal;
        }
        .item2 {
            margin: 20px;
            border: 1px solid;
            width: 100px;
            /*CJK 和 non-CJK 文本被随意拆分换行，不会出现文本框溢出，但是 non-CJK 文本也失去原有的样子； */
            word-break: break-all;
        }
        .item3 {
            margin: 20px;
            border: 1px solid;
            width: 100px;
            /*由于只能在半角空格或连字符处换行，所以过长的 non-CJK 文本产生了溢出现象，但是每个单词都能在一行内呈现*/
            /*CJK 文本是不断行的*/
            word-break: keep-all;
        }
    </style>
</head>
<body>
    <div class="item1">
        我爱学习，我爱中国四川川川川！Hello world!veryveryveryveryverylongword
        isn't it?
    </div>
    <div class="item2">
        我爱学习，我爱中国四川川川川！Hello world!veryveryveryveryverylongword
        isn't it?
    </div>
    <div class="item3">
        我爱学习，我爱中国四川川川川！Hello world!veryveryveryveryverylongword
        isn't it?
    </div>
</body>

在这里插入图片描述
第一个文本框的 word-break 属性设置为 normal，可以看到，浏览器默认换行是 CJK 换行，non-CJK 换行方式是在半角空格连字符的地方换行，长单词不换行。

第二个文本框的 word-break 属性设置为 break-all，可以看到 CJK 和 non-CJK 文本被随意拆分换行，不会出现文本框溢出，但是 non-CJK 文本也失去原有的样子；

第三个文本框的 word-break 属性设置为 keep-all，由于只能在半角空格或连字符处换行，所以过长的 non-CJK 文本产生了溢出现象，但是每个单词都能在一行内呈现，另外，设置为 keep-all 时，CJK 文本是不断行的，在第一个逗号的地方产生了换行，第二行的我爱中国四川川川川！中间没有半角空格或连字符，所以没有换行产生了溢出，直到感叹号的地方才产生换行。