css 文本换行那些事

• #css

换行与不换行

文本总长度超过容器的宽度，默认是自动换行的。

如果不想换行，可以设置 white-space 属性，这样文本就不会换行了，但是内容会超出容器。

对于超出容器的部分隐藏起来，可以使用 overflow 属性。

直接隐藏起来不是很友好，别人可能不知道这句话后面还有内容，可以显示省略号给人暗示这句话并不完整。

使用 text-overflow 属性，作用是描述超出容器的部分如何处理，属性值有两个：

• clip：默认值，直接裁剪掉超出容器的部分；（就是上面👆🏻看到的效果）
• ellipsis：超出容器的部分显示省略号；（见下方👇示例）

不仅仅是换行

经常看到新闻标题很长很长，第一行显示很多文本，第二行换行之后只显示两三个文本，看起来很不美观。

这时候可以使用 text-wrap 属性，让换行不仅仅是换行。

可以看到换行之后第一行和第二行的文本数量是差不多的，这样看起来就美观多了。

有些朋友可能会说，希望根据标点符号进行换行，保证阅读连贯性。可以使用 word-break 属性。

换行规则

中文换行差不多就这些事了，但是英文换行还有些话要说。

如下示例，可以看到第一行后面有很大一片留白，这是因为单词 oceannnnnnnnnnnnnn 太长了，第一行放不下，默认换行规则是需要保持单词完整性的，导致留下这么一块留白。

如果你说我要节约空间，不想要那留白，可以使用 word-break 属性。

这时候可以看到空间得到了充分的利用，但是单词 oceannnnnnnnnnnnnn 被截断了。

↶ 返回首页 ↶