CSS换行：word-wrap、word-break和text-wrap差异

时间 2019-11-18

标签 css 换行 word wrap break text 差异栏目 CSS 繁體版

原文原文链接

1、word-wrap：赞成对长的不可切割的单词进行切割并换行到下一行。(中英文处理效果同样)css

word-wrap有两个取值：html

一、word-wrap: normal：仅仅在赞成的断字点换行（浏览器保持默认处理）。浏览器

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

   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>

默认状况下：ui

加入样式：spa

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

2、word-break：规定非中日韩文本的换行规则。rest

(对中文正常换行，对英文依照例如如下说明处理)code

word-break有三个取值：orm

一、word-break: normal：使用浏览器默认的换行规则。htm

（等价于word-wrap: normal）

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

给div加入此规则

   1: word-break:break-all;

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

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

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

   1: <div>

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

   3:   </div>

效果：在ipsum后产生了换行

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

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

一、text-wrap：normal：仅仅在赞成的换行点进行换行。

二、text-wrap：none：不换行。

元素没法容纳的文本会溢出。

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

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

PS：眼下主流浏览器都不支持 text-wrap 属性。

来源：http://www.ido321.com/621.html