CSS换行：word-wrap、word-break和text-wrap区别

野性酷女 2022-08-12 03:58 173阅读 0赞

一、word-wrap：允许对长的不可分割的单词进行分割并换行到下一行。(中英文处理效果一样)

word-wrap有两个取值：

1、word-wrap: normal：只在允许的断字点换行（浏览器保持默认处理）。

2、word-wrap: break-word：在长单词或 URL 地址内部进行换行。（即在容器末端有长单词不能完全显示，不会截断单词，而是作为整体，自动换行）

1: <!DOCTYPE>

2: <html lang="zh-en">

3: <head>

4:    <title>CSS换行</title>

5:    <meta http-equiv="content-type" content="text/html;charset=utf-8">

6:    <style type="text/css">

7:            div{

8:                padding: 0;

9:                margin: 0 auto;

10:                width: 200px;

11:                height: 100px;

12:                border: 1px solid red;

13:            }

14:    </style>

15: </head>

16: <body>

17:   <div>

18:       Lorem ipsum dolor sit amet, consectetur adipiscing elit.

19:   </div>

20: </body>

21: </html>

默认情况下：

![SouthEast][]

添加样式：

1: word-wrap:break-word;          //效果和上述一样

二、word-break：规定非中日韩文本的换行规则。(对中文正常换行，对英文按照如下说明处理)

word-break有三个取值：

1、word-break: normal：使用浏览器默认的换行规则。（等价于word-wrap: normal）

2、word-break: break-all：允许在单词内换行。（即在容器末端有长单词不能完全显示，会截断单词）

给div添加此规则

1: word-break:break-all;

效果：对sit进行了截断处理

![SouthEast 1][]

3、word-break: keep-all：只能在半角空格或连字符处换行。

为了演示，在原文本的ipsum、dolor和sit之间加入一个连字符（-）

1: <div>

2:       Lorem ipsum-dolor-sit amet, consectetur adipiscing elit.

3:   </div>

效果：在ipsum后产生了换行

![SouthEast 2][]

三、text-wrap：规定文本的换行规则。

text-wrap是CSS3属性，有4个取值：

1、text-wrap：normal：只在允许的换行点进行换行。

2、text-wrap：none：不换行。元素无法容纳的文本会溢出。

3、text-wrap：suppress：压缩元素中的换行。浏览器只在行中没有其他有效换行点时进行换行。

4、text-wrap：unrestricted：在任意两个字符间换行。

**  PS：目前主流浏览器都不支持 text-wrap 属性。**

**来源：[http://www.ido321.com/621.html][http_www.ido321.com_621.html]**

[SouthEast]: /images/20220810/eabac208d48440dd9c008a13193bde9c.png
[SouthEast 1]: /images/20220810/899d988b685f4287a2bff12885d58272.png
[SouthEast 2]: /images/20220810/02adcf03cb2949c98ccca07f9f199213.png
[http_www.ido321.com_621.html]: http://www.ido321.com/621.html

发表评论取消回复

表情：

评论列表（有 0 条评论，173人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS实现强制不换行、自动换行、强制换行的css代码

制不换行 p \{ white-space:nowrap; \} 自动换行 p \{ word-wrap:break-word; word-break:n...

灰太狼/ 2024年04月19日 15:09/ 0 赞/ 207 阅读

相关 word-break属性和css换行显示

　　这几天在做项目的时候，遇到了比较棘手的问题，便是在一个标签里边展示内容，如果说展示中文汉字，一点问题都没有，但是只要连续展示英文字母或者中文的标点符号（中间不带空格），那么

缺乏、安全感/ 2023年06月10日 12:26/ 0 赞/ 35 阅读

相关超长换行_控制换行和空白处理的CSS属性-white-spac

本文说的white-space是一个控制换行和空白处理的CSS属性。我曾经被这个属性烦死，一直没记住，今天决定还是写下来好好琢磨下。 ![7881b39926d412e7a1

系统管理员/ 2023年01月07日 08:46/ 0 赞/ 190 阅读

相关 CSS换行：word-wrap、word-break和text-wrap区别

一、word-wrap：允许对长的不可分割的单词进行分割并换行到下一行。(中英文处理效果一样) word-wrap有两个取值： 1、word-wra

野性酷女/ 2022年08月12日 03:58/ 0 赞/ 174 阅读

相关 CSS 强制换行

一般情况下，元素拥有默认的white-space:normal（自动换行，不换行是white-space:nowrap）,当录入的文字超过定义的宽度后会自动换行

我不是女神ヾ/ 2022年07月27日 12:00/ 0 赞/ 366 阅读

相关 CSS之换行

都说前端的东西多，难记，不说js那些各种各样的方法，那些经常用到的话还好一些，随手都可以拾起来，但是css中的参数则不然，除了一些根深蒂固性的东西，一些特殊的

矫情吗；*/ 2022年07月11日 14:11/ 0 赞/ 316 阅读

相关 CSS控制文本自动换行

![Center][] [Center]: /images/20220608/d94b480f135b41b9a02f8a742ba7c5ec.png

忘是亡心i/ 2022年06月08日 07:26/ 0 赞/ 393 阅读

相关 CSS —— html 自动换行

涉及三个属性： white-space：规定如何处理空白，是否换行，默认值：normal（超出时自动换行）； word-wrap：normal （默认，只在内容的断点换行，

朴灿烈づ我的快乐病毒、/ 2022年05月18日 02:17/ 0 赞/ 440 阅读

相关 CSS强制换行

CSS强制换行近来在项目中又遇上讨厌的换行问题，所以不得不又google一下，总算完成了任务。对于CSS不熟悉的朋友可以学习以下的文字。以下内容来自网络，

客官°小女子只卖身不卖艺/ 2021年10月24日 04:12/ 0 赞/ 564 阅读

相关 CSS强制英文、中文换行与不换行强制英文换行

1. word-break:break-all;只对英文起作用，以字母作为换行依据 2. word-wrap:break-word; 只对英文起作用，以单词作为

分手后的思念是犯贱/ 2021年09月12日 08:40/ 0 赞/ 643 阅读