word-break和word-wrap

最新推荐文章于 2025-03-21 12:05:16 发布

转载最新推荐文章于 2025-03-21 12:05:16 发布 · 88 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/snowinmay/archive/2012/12/30/2839681.html

本文详细解析了CSS中word-break与word-wrap属性的区别及用法，包括break-all、keep-all、normal与break-word等参数的具体表现，帮助读者理解如何在不同场景下正确应用这些属性。

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
区分文字和英文（数字），如果超出部分遇到文字，那么就换行，如果是英文和数字，那么将整个（英文和数字）都放到下一行。

转载于:https://www.cnblogs.com/snowinmay/archive/2012/12/30/2839681.html