word-break实现多种文本换行效果
时间：06-15来源：作者：点击数：
当HTML元素不足以显示它里面的所有文本，浏览器会自动换行显示它里面的所有文本。浏览器默认换行规则是，对于西方文字来说，浏览器只会在半角空格、连字符的地方进行换行，不会在单词中间换行；对于中文来说，浏览器可以在任何一个中文字符后换行。
如果希望改变浏览器的默认行为，则可通过word-break属性进行设置。该属性支持如下三个值。
- normal:靠浏览器的默认规则进行换行。
- keep-all：只能在半角空格或连字符处换行。
- break-all:设置允许在单词中间换行。
下面代码示范了word-break功能：
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> word-break </title>
<style type="text/css">
/* 为div元素增加边框 */
div{
border:1px solid #000000;
height: 50px;
width: 240px;
}
</style>
</head>
<body>
<!-- 不允许在单词中换行 -->
word-break:keep-all <div style="word-break:keep-all">
The root interface in the collection hierarchy. </div>
<!-- 指定允许在单词中换行 -->
word-break:break-all <div style="word-break:break-all">
The root interface in the collection hierarchy. </div>
</body>
</html>
效果图：
方便获取更多学习、工作、生活信息请关注本站微信公众号
推荐内容
相关内容
栏目更新
栏目热门
湘公网安备 43102202000103号