跳到主要内容位置

CSS 设置文字折行

在网页文字比较多,并且文本容器宽度有限的话,文本就会溢出容器宽度,有可能覆盖到其它元素上面,这里的文本主要针对的是英文,因为英文单词是以空格为分界的,两个空格中间是一个完整的单词,无论是否超过容器宽度,浏览器默认都不会把这个单词分割成两部分,并放到下一行,例如下方代码所示:

<style>
div {
width: 100px;
border: 1px solid blue;
}
</style>
<div>
<p>This is an example text, with a very looooooooooooooooooooooooooooooooooooooooooooooooooooong word</p>
</div>

预览:

示例里的 div 容器设置宽度为 100px,里面的 p 元素文本有一个特别长的单词,但是 CSS 默认是不会给它拆开并折行的,只有遇到下一个单词才会进行折行。

break-all

这个时候,我们可以使用 CSS 的 word-break 属性,来控制单词的分割与折行,例如上面的例子,word-break 默认取的是 normal 值,如果改成 break-all,那么它就根据容器的宽度,把单词拆开并折行:

<style>
div {
width: 100px;
border: 1px solid blue;
}

p {
word-break: break-all;
}
</style>
<div>
<p>This is an example text, with a very looooooooooooooooooooooooooooooooooooooooooooooooooooong word</p>
</div>

预览:

这时可以看到 looooooooooooooooooooooooooooooooooooooooooooooooooooong 这一长串被拆开了,多余的部分显示到了下一行。

keep-all

word-break 还有另一个取值 keep-all,这个是专门对中文、日文、韩文这种单个文字字体设计的,因为中文的字符都是单个文字,长度固定,所以容器无论宽度为多少都能正常换行,这时如果想让所有文字都在一行,无视容器的宽度,那么就可以使用 keep-all

<style>
div {
width: 100px;
border: 1px solid blue;
}
p {
word-break: keep-all;
}
</style>
<div>
<p>这是一段比较比较比较比较比较比较比较比较比较比较比较长的中文段落。</p>
</div>

预览:

如果去掉 word-break,那么它就会显示成正常换行的形式:

<style>
div {
width: 100px;
border: 1px solid blue;
}
</style>
<div>
<p>这是一段比较比较比较比较比较比较比较比较比较比较比较长的中文段落。</p>
</div>

预览:

小结

本小节介绍了 CSS word-break 属性的用法,控制文本是否应根据容器的宽度进行折行显示,对于英文文字来说,就是要不要把较长的单词分割并折行显示,对于中文来说,就是是否应该把所有文字都显示在一行。

提示

一系列的课程让你成为高级前端工程师。课程覆盖工作中所有常用的知识点和背后的使用逻辑,示例全部都为工作项目简化而来,学完即可直接上手开发!

即使你已经是高级前端工程师,在课程里也可能会发现新的知识点和技巧,让你的工作更加轻松!

《React 完全指南》课程,包含 React、React Router 和 Redux 详细介绍,所有示例改编自真实工作代码。点击查看详情。

《Vue 3.x 全家桶完全指南与实战》课程,包括 Vue 3.x、TypeScript、Vue Router 4.x、Vuex 4.x 所有初级到高级的语法特性详解,让你完全胜任 Vue 前端开发的工作。点击查看详情。

《React即时通信UI实战》课程,利用 Storybook、Styled-components、React-Spring 打造属于自己的组件库。

《JavaScript 基础语法详解》本人所著图书,包含 JavaScript 全面的语法知识和新特性, 可在京东、当当、淘宝等各大电商购买