自动换行word-break:break-all和word-wrap:break-word的区别

word-break:break-all 单词内自动换行,如果一个单词很长的话
word-wrap:break-word 如果一个单词很长, 不自动换行
<h:panelGrid id="grid3" styleClass="panelGrid" columns="2">
<h:outputText value="Target Location: " styleClass="outputLabel"></h:outputText>
<h:outputLink value="javascript:;" οnclick="openTargetUrl(); return false;">
<h:outputText value="#{assetPlanBean.showDetailRow.targetLocation}" style="word-break:break-all" styleClass="outputText"></h:outputText>
</h:outputLink>
</h:panelGrid>

2、不换行:
<style type="text/css">
.NoNewline
{
word-break: keep-all;/*必须*/
}
</style>

<table>
<tr>
<td class="NoNewline">不换行不换行不换行不换行不换行不换行不换行不换行不换行不换行</td>
</tr>
</table>


word-break:break-all和word-wrap:break-word都是能使其容器如DIV的内容自动换行。
它们的区别就在于:
1,word-break:break-all 例如div宽200px,它的内容就会到200px自动换行,如果该行末端有个英文单词很长(congratulation等),它会把单词截断,变成该行末端为conra(congratulation的前端部分),下一行为tulation(conguatulation)的后端部分了。
2,word-wrap:break-word 例子与上面一样,但区别就是它会把congratulation整个单词看成一个整体,如果该行末端宽度不够显示整个单词,它会自动把整个单词放到下一行,而不会把单词截断掉的。

word-break;break-all 支持版本:IE5以上 该行为与亚洲语言的 normal 相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本。
WORD-WRAP:break-word 支持版本:IE5.5以上 内容将在边界内换行。如果需要,词内换行( word-break )也将发生。

还有,我在做KingCMS模板的时候,碰到easyarticle[list](此为5.0版本所含文件)页面。这个页面是个文章列表, 其中有个 (king:description size="200"/)的标签,也就是说其描述是200个字符,因为默认的模板比内容div容器比较大,所以能正常显示,但当size设置为400的时候,超过内容div容器的时候,右栏的内容就会被顶到下面去,所以这时候在class中设置下word-wrap: break-word;就可以解决这个问题了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值