CSS自动换行、强制不换行、强制断行、超出显示省略号_html/css_WEB-ITnose
先给出各种方式,再具体介绍每一个属性。
强制不换行
p { white-space:nowrap; }
自动换行
p { word-wrap:break-word; }
强制英文单词断行
p { word-break:break-all; }
*注意:设置强制将英文单词断行,需要将行内元素设置为块级元素。
超出显示省略号
p{text-overflow:ellipsis;overflow:hidden;}
white-space: normal|pre|nowrap|pre-wrap|pre-line|inherit;
white-space 属性设置如何处理元素内的空白
normal 默认。空白会被浏览器忽略。
pre 空白会被浏览器保留。其行为方式类似 HTML 中的 pre 标签。
nowrap 文本不会换行,文本会在在同一行上继续,直到遇到 br 标签为止。
pre-wrap 保留空白符序列,但是正常地进行换行。
pre-line 合并空白符序列,但是保留换行符。
inherit 规定应该从父元素继承 white-space 属性的值。
word-wrap: normal|break-word;
word-wrap 属性用来标明是否允许浏览器在单词内进行断句,这是为了防止当一个字符串太长而找不到它的自然断句点时产生溢出现象。
normal: 只在允许的断字点换行(浏览器保持默认处理)
break-word:在长单词或URL地址内部进行换行
word-break: normal|break-all|keep-all;
word-break 属性用来标明怎么样进行单词内的断句。
normal:使用浏览器默认的换行规则。
break-all:允许再单词内换行
keep-all:只能在半角空格或连字符处换行
举例看起区别:
Document wordwrap:breakword;absavhsafhuafdfbjhfvsalguvfaihuivfs
wordwrap:break-word;absavhsafhuafdfbjhfvsalguvfaihui
wordwrap:break-word;absavhsafhuafdfbjhfvsalguvfaihuivf
wordwrap:breakword;absavhsafhuafdfbjhfvsalguvfaihuivfsa
wordwrap:breakword;absavhsafhuafdfbjhfvsalguvfaihuivfsab
效果如下:
推荐阅读
-
解决html表格中内容超出不强制换行和超出宽度自动隐藏并显示省略号_html/css_WEB-ITnose
-
几个简单的css设置问题:div居中,ul li不换行 ,内容超出自动变省略号等_html/css_WEB-ITnose
-
CSS自动换行、强制不换行、强制断行、超出显示省略号_html/css_WEB-ITnose
-
CSS控制文本超出指定宽度显示省略号和文本不换行_html/css_WEB-ITnose
-
换行并且在某行实现超出div显示省略号。_html/css_WEB-ITnose
-
CSS控制文本超出指定宽度显示省略号和文本不换行_html/css_WEB-ITnose
-
CSS自动换行、强制不换行、强制断行、超出显示省略号_html/css_WEB-ITnose
-
css样式不换行超出部分省略号显示不兼容firefox_html/css_WEB-ITnose
-
换行并且在某行实现超出div显示省略号。_html/css_WEB-ITnose
-
解决html表格中内容超出不强制换行和超出宽度自动隐藏并显示省略号_html/css_WEB-ITnose