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

      word-wrap有两个取值:

      1、word-wrap: normal:仅仅在同意的断字点换行(浏览器保持默认处理)。

      2、word-wrap: break-word:在长单词或 URL 地址内部进行换行。(即在容器末端有长单词不能全然显示,不会截断单词,而是作为总体,自己主动换行

>
>
>
>
>
>
div{
padding: 0;
0 auto;
200px;
100px;
1px solid red;
            }
>
>
>
>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
>
>
>

默认情况下:

CSS换行:word-wrap、word-break和text-wrap差别

加入样式:

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

 

二、word-break:规定非中日韩文本的换行规则。

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

        word-break有三个取值:

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

等价于word-wrap: normal

        2、word-break: break-all:同意在单词内换行。(即在容器末端有长单词不能全然显示,会截断单词

给div加入此规则

-all;

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

CSS换行:word-wrap、word-break和text-wrap差别

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

为了演示,在原文本的ipsum、dolor和sit之间增加一个连字符(-)

>
       Lorem ipsum-dolor-sit amet, consectetur adipiscing elit. 
>

效果:在ipsum后产生了换行

CSS换行:word-wrap、word-break和text-wrap差别

三、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


相关文章:

  • 2021-07-12
  • 2021-07-04
  • 2022-12-23
  • 2022-12-23
  • 2021-10-17
  • 2021-07-20
  • 2022-01-22
猜你喜欢
  • 2021-06-23
  • 2022-02-12
  • 2022-12-23
  • 2022-02-22
  • 2022-12-23
相关资源
相似解决方案