word-wrap,word-break,text-wrap的区别

最新推荐文章于 2021-10-07 19:53:43 发布

dongjuhang3465

最新推荐文章于 2021-10-07 19:53:43 发布

阅读量138

点赞数

原文链接：http://www.cnblogs.com/yuzheCyril/p/5436863.html

版权

今晚看到了无双老师关于word-wrap,word-break区别的讲解 http://www.cnblogs.com/2050/archive/2012/08/10/2632256.html

受益匪浅，特此在做一下自己的总结

word-wrap

　　对长单词进行折断,对长单词首先换行看第二行是否可以容纳，若不能，在第二行强制折断默认值为normal 折断值为break-world

word-break

　　对长单词进行折断，直接强制折断，不换行默认值为normal 折断值为break-all

text-wrap

　　对文本折行，但是目前主流的浏览器都不支持该属性，所以无需考虑

以下段代码为例

<!DOCTYPE html>
<html>
<head>
<style> 
p.test
{
width:11em; 
border:1px solid #000000;
/*
word-wrap:break-word;
word-break:break-all;
*/
}
</style>
</head>
<body>

<p class="test">this asdsadasdasadsadlongwordthisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</p>

</body>
</html>

不设置换行时

当为word-wrap：break-word时

当为word-break:break-all

可以看到，用户代理默认的会对长单词进行换行,而word-wrap默认了这一行为，但是word-break会强制忽略这一行为。

转载于:https://www.cnblogs.com/yuzheCyril/p/5436863.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

dongjuhang3465

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
word-wrap,word-break,text-wrap的区别

今晚看到了无双老师关于word-wrap,word-break区别的讲解 http://www.cnblogs.com/2050/archive/2012/08/10/2632256.html受益匪浅，特此在做一下自己的总结word-wrap　　对长单词进行折断,对长单词首先换行看第二行是否可以容纳，若不能，在第二行强制折断默认值为normal 折断值为break-wo...
复制链接

扫一扫