word-break控制的几种容器换行行为详解

DanceDonkey

于 2025-01-14 09:54:09 发布

阅读量564

点赞数 3

文章标签： CSS word-break

本文链接：https://blog.youkuaiyun.com/qq_43750656/article/details/145129962

版权

word-break 属性在控制换行行为时需要根据语言判断，对于中文一个字符就是一个单词，字符换行不影响阅读理解，而对于英文来说，多个连续的字符才会是一个单词，例如中文的早英文为 morning。 morning7个字符才算一个单词，mo rni ng 如果是呈现这种情况，是及其不易阅读理解。也就是说 word-break的换行行为是和字符的unicode码有关。

break-all
允许容器内的单词不连续换行，也就是当字符到达容器边界时，可以拆词，这是主要是适用于英文、字符、数字的。例如允许将moring换行成
mo
rni
ng

<div style="width: 100px;background-color: lightblue;">
    <span style="word-break: break-all">
            Good morningmorningmorning! Good morning!Good morning!
    </span>
</div>