先给出各种办法,再详细先容每一个属性。
逼迫不换行
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:只能在半角空格或连字符处换行
举例看起差异:
<!doctype html>
<head>
<!--网站编码格式,UTF-8 国际编码,GBK或 gb2312 中文编码-->
<meta http-equiv=\公众content-type\公众 content=\"大众text/html;charset=utf-8\"大众 />
<meta name=\公众Keywords\"大众 content=\"大众关键词一,关键词二\"大众>
<meta name=\"大众Description\"大众 content=\"大众网站描述内容\"大众>
<meta name=\"大众Author\公众 content=\公众Yvette Lau\公众>
<title>Document</title>
<!--css js 文件的引入-->
<style>
.word{background:#E4FFE9;width:250px;margin:50px auto;padding:20px;font-family:\"大众microsoft yahei\"大众;}
/ 逼迫不换行 /
.nowrap{white-space:nowrap;}
/ 许可单词内断句,首先会考试测验挪到下一行,看看下一行的宽度够不足,
不足的话就进行单词内的断句 /
.breakword{word-wrap: break-word;}
/ 断句时,不会把长单词挪到下一行,而是直接进行单词内的断句 /
.breakAll{word-break:break-all;}
/ 超出部分显示省略号 /
.ellipsis{text-overflow:ellipsis;overflow:hidden;}
</style>
</head>
<body>
<div class = \"大众word\公众>
<p class = \公众nowrap\"大众>wordwrap:breakword;absavhsafhuafdfbjhfvsalguvfaihuivfs</p>
<p class = \公众breakword\"大众>wordwrap:break-word;absavhsafhuafdfbjhfvsalguvfaihui</p>
<p class = \"大众breakAll\"大众>wordwrap:break-word;absavhsafhuafdfbjhfvsalguvfaihuivf</p>
<p class = \"大众normal\"大众>wordwrap:breakword;absavhsafhuafdfbjhfvsalguvfaihuivfsa</p>
<p class = \"大众ellipsis\"大众>wordwrap:breakword;absavhsafhuafdfbjhfvsalguvfaihuivfsab</p>
</div>
</body>
</html>
123456789101112131415161718192021222324252627282930313233效果如下: