text-wrap、text-wrap、word-break、word-spacing、white-space等文字排版CSS总结

最新推荐文章于 2024-08-24 08:03:00 发布

原创最新推荐文章于 2024-08-24 08:03:00 发布 · 2.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #word-wrap #text-wrap #word-break

web开发专栏收录该内容

32 篇文章

订阅专栏

本文总结了CSS中关于文字排版的重要属性，包括word-wrap、text-wrap（非主流支持）、word-break和white-space。word-wrap允许长单词或URL换行，word-break控制单词内部的换行行为，而white-space则用于设定元素内空白的处理方式。通过调整这些属性，可以有效控制文本在不同场景下的显示效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

word-wrap：允许长单词或 URL 地址换行到下一行

word-wrap: normal|break-word;

text-wrap: 规定文本的换行（折行）规则。目前主流浏览器都不支持

text-wrap: normal|none|unrestricted|suppress;

word-break :规定自动换行的处理方法

word-break: normal|break-all（允许在单词内换行）|keep-all（只能在半角空格或连字符处换行）;

word-spacing:增加或减少单词间的空白，定义元素中字之间插入多少空白符。如果指定为长度值，会调整字之间的通常间隔；所以，normal 就等同于设置为 0。允许指定负长度值，这会让字之间挤得更紧。

word-spacing:normal|length;

white-space:设置如何处理元素内的空白

white-space:normal | pre | nowrap| pre-wrap| pre-line ;

测试代码如下：

<div style="word-wrap: normal;width:5px">hbellloojfjd</div>
<div style="word-wrap: break-word;width:5px">hbel lloojf jd</div>
<div style="word-wrap: normal;width:5px">hbel lloojf jdf</div>
<div style="word-wrap: break-word ;width:5px">hbellloojfjdf</div>
<br/>
<div style="word-break:normal;width:5px">hbellloojfjdf</div>
<div style="word-break: normal;width:5px">hbel lloojf jdf </div>
<div style="word-break:break-all;width:5px">hbellloojfjdf</div>
<div style="word-break: break-all;width:5px">hbel lloojf jdf</div>
<br/>
<div style="word-spacing: normal;width:150px">hbelll oojfjdf</div>
<div style="word-spacing:5px;width:150px">hbelll oojfjdf</div>

结果：