CSS的word-break 属性

最新推荐文章于 2024-01-26 13:49:36 发布

weixin_34357928

最新推荐文章于 2024-01-26 13:49:36 发布

阅读量158

点赞数

文章标签： python

原文链接：https://my.oschina.net/741691740/blog/208370

版权

2019独角兽企业重金招聘Python工程师标准>>>

<!DOCTYPE html>
<html>
<head>
<style> 
p.test1
{
width:150px; 
border:1px solid #000000;

}

p.test2
{
width:150px; 
border:1px solid #000000;

}
</style>
</head>
<body>

<p class="test1">This is a veryveryveryveryveryveryveryveryveryvery long paragraph.</p>
<p class="test2">This is a veryveryveryveryveryveryveryveryveryvery long paragraph.</p>

<p><b>注释：</b>目前 Opera 不支持 word-break 属性。</p>

</body>
</html>

由于文字超过了p标签的宽度，所以就会发生换行，那么运行的结果是这样的：

浏览器会自动的为文字换行，要控制这个换行，就要使用word-break属性

word-break:normal;就是使用浏览器自带的换行属性

如果是word-break属性为break-all的时候，就是只要碰到了内容的最大长度就换行，不管是不是一个单词：

<!DOCTYPE html>
<html>
<head>
<style> 
p.test1
{
width:150px; 
border:1px solid #000000;
word-break:break-all;
}


</style>
</head>
<body>

<p class="test1">This is a veryveryveryveryveryveryveryveryveryvery long paragraph.</p>
<p class="test2">This is a veryveryveryveryveryveryveryveryveryvery long paragraph.</p>

<p><b>注释：</b>目前 Opera 不支持 word-break 属性。</p>

</body>
</html>

运行的结果：