日期:2014-05-17  浏览次数:20749 次

html常用的换行控制

text-overflow: clip | ellipsis
clip :  不显示省略标记(...),而是简单的裁切
ellipsis :  当对象内文本溢出时显示省略标记(...)。
需要配合white-space:nowrap使用。为了使 ellipsis 值被应用,此属性必须被设置到具有不可视区域的对象。最好的选择是设置 overflow 属性为 hidden 。设置 overflow 属性为 scroll 或者 auto 时,此属性也会应用。但是会有滚动条出现。

?

white-space : normal | pre | nowrap
设置或检索对象内空格字符的处理方式。

#####normal : 默认。文本自动break。内容拆到下一行,如果超过这个对象的宽度。
nowrap :  强制在同一行内显示所有文本,直到文本结束或者遭遇br对象。

Whitespace, such as line breaks, spaces, and tabs, is collapsed by default in HTML documents。

?

normal?
???? A value of normal dictates that sequences of whitespace will collapse into a single space character.

???? Line breaks will occur wherever necessary to fill line boxes.
nowrap
???? Specifying nowrap ensures that sequences of whitespace will collapse into a single space character,??but line breaks will be suppressed.
pre
???? Specifying pre ensures that sequences of whitespace won’t collapse. Lines are only broken at new lines in the markup (or at occurrences of "\a" in generated content).

即normal和nowrap会把4个空格变成一个空格。而pre不会,pre显示原始的内容。

http://reference.sitepoint.com/css/white-space

?


word-break : normal | break-all | keep-all
最常用的控制换行属性,常与word-wrap结合使用。对于中文,应该使用 break-all

normal:默认。允许在词内换行。

break-all:对于亚洲文件和normal相同,然而允许非亚洲文本武断的换行。这个值适用于,亚洲文本中包含一些摘录的非亚洲文本。

keep-all:?不允许亚洲文本词内换行。对非亚洲文件和normal相同。这个值为文本中包含少量的亚洲字符进行优化。


word-wrap : normal | break-word
normal:默认值。允许内容顶开指定的容器边界
break-word:内容将在边界内换行。如果需要,词内换行( word-break )也将发生


你想在限制宽度里仅显示一行文字,而这行文 字的长度却超过这个宽度,结合white-space+text-overflow可以达到更好的效果。

http://www.aspxhome.com/design/css/20097/946816.htm

?

?