word-wrap控制长单词或URL地址换行
时间：06-15来源：作者：点击数：
有时候文本内容中包含了特别长的单词或特别长的URL地址——URL地址既不包含半角空格，也不包含连字符，因此当浏览器窗口较窄时，浏览器下部将会出现滚动条，用户只有通过拖动滚动条才能看到全部内容。
如果需要改变浏览器的默认行为，则可通过word-wrap属性进行设置。该属性支持如下两个值。
- normal:靠浏览器默认规则进行换行。
- break-word:设置允许在单词中间换行。
为了让浏览器控制文本内容在长单词、URL地址中间换行，可以通过word-wrap属性来实现，如果把word-wrap属性设为break-word，即可让浏览器在长单词和URL地址中间换行。
如下页面示范了word-wrap属性的功能。
<!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-wrap </title>
<style type="text/css">
/* 为div元素增加边框 */
div{
border:1px solid #000000;
height: 70px;
width:140px;
}
</style>
</head>
<body>
<!-- 不允许在长单词、URL地址中间换行 -->
word-wrap:normal <div style="word-wrap:normal;">
Our domain is http://www.crazyit.org</div>
<!-- 允许在长单词、URL地址中间换行 -->
word-wrap:break-word <div style="word-wrap:break-word;">
Our domain is http://www.crazyit.org</div>
</body>
</html>
效果图:
需要指出的是，word-break与word-wrap属性的作用并不相同，它们的区别如下。
- word-break:将该属性设为break-all，可以让元素内每一行文本的最后一个单词自动换行。（在我的博客中有详细介绍）
- word-wrap：该属性会尽量让长单词、URL地址不要换行。即使将该属性设为break-word，浏览器也会尽量让长单词、URL地址单独占用一行，只有当一行文本都不足以显示这个长单词、URL地址时，浏览器才会在长单词、URL地址中间换行。
方便获取更多学习、工作、生活信息请关注本站微信公众号
上一篇:dispaly属性四大常用取值
下一篇:word-break实现多种文本换行效果
推荐内容
相关内容
栏目更新
栏目热门
湘公网安备 43102202000103号