word-break和word-wrap

word-break和word-wrap很多情况上去都一样,看了一个上午也没看透他们的区别。

例子:

.mbox h2 span.top_notice
	{ 
	font: normal 12px "宋体"; 
	position: absolute; 
	right: 10px; 
	bottom: 1px;  
	line-height: 40px; 
	padding-left: 20px; 
	background:url(/static/css/i/top_notice.gif) no-repeat 0 12px; 
	overflow: hidden; 
	width: 480px; 
	height: 40px; 
	text-overflow:ellipsis;
	white-space:nowrap;
} 

 

word-break
语法:
word-break : normal | break-all | keep-all
 
参数:
normal :  依照亚洲语言和非亚洲语言的文本规则,允许在字内换行
break-all :  该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本
keep-all :  与所有非亚洲语言的normal相同。对于中文,韩文,日文,不允许字断开。适合包含少量亚洲文本的非亚洲文本
 
说明:
设置或检索对象内文本的字内换行行为。尤其在出现多种语言时。
对于中文,应该使用break-all 。

1.break-all
只要超出宽度,不管什么内容都换行(文字,英文,数字)。
2.normal
区分文字和英文(数字),如果超出部分遇到文字,那么就换行,如果是英文和数字,那么将整个(英文和数字)都放到下一行。
3.keep-all
不管什么内容(文字,英文,数字)都不换行,除非有字断开。


word-wrap
语法:
word-wrap : normal | break-word
 
参数:
normal :  允许内容顶开指定的容器边界
break-word :  内容将在边界内换行。如果需要,词内换行(word-break)也行发生
 
说明:
设置或检索当当前行超过指定容器的边界时是否断开转行。

1.break-word
使用break-word时,是将强制换行。中文没有任何问题,英文语句也没问题。但是对于长串的英文,就不起作用。
2.normal
区分文字和英文(数字),如果超出部分遇到文字,那么就换行,如果是英文和数字,那么将整个(英文和数字)都放到下一行。

你可能感兴趣的:(word-break)