word-wrap控制长单词或URL地址换行

有时候文本内容中包含了特别长的单词或特别长的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地址中间换行。

word-wrap控制长单词或URL地址换行相关推荐

word-wrap长单词与URL地址自动换行
word-wrap长单词与URL地址自动换行 word-wrap属性的属性值: 1)normal 浏览器保持默认的处理方式,只有在半角空格或者是连字符的地方进行换行 2)break-word 浏览器可 ...
CSS3让长单词与URL地址自动换行——word-wrap属性
div{ word-wrap:break-word; } word-wrap属性可以使用的属性值为normal与break-word两个.使用normal属性值时浏览器默认处理,只在半角空格或者连字符 ...
html5属性单词,在Html5 中word-wrap属性用于实现长单词和URL地址的自动换行。( )
[判断题]低温有利于延长休眠时间,温度越低效果越好.( ) [单选题]在下列规定商品检验时间和地点的方法中,较为公平合理的是( ). [多选题]The introduction of process ...
js控制URL地址的改变，以微信服务号的授权获取用户的昵称和头像为例
当遇到某个场景需改变当前的URL的时候,有以下几种方法 window.location = "http://service.gaotianyue.com/moon/index.html?op ...
php视频播放链提取,php获取腾讯云点播上传视频后获取视频url地址以及时长 | 小灰灰博客...
/** * Created by PhpStorm. * User: 小灰灰 * Date: 2018/12/23 9:02 * Other: */ class Test { public funct ...
结对项目-最长单词链总结
项目内容这个作业属于哪个课程 2023北航敏捷软工这个作业的要求在哪里结对项目-最长单词链我在这个课程的目标是学习软件工程理论,在实践中体会并运用软件工程理论,收获团队开发和软件工程实践经 ...
浏览器输入一个URL地址后发生的事情
在浏览器中输入一个URL至页面呈现,发生的事情? 1.域名解析:浏览器获得URL地址,向操作系统请求该URL对应的IP地址,操作系统查询DNS(首先查询本地HOST文件,没有则查询网络)获得对应的IP ...
结对编程——最长单词链
项目内容这个作业属于哪个课程 2023 年北航软件工程这个作业的要求在哪里结对项目-最长英语单词链我在这个课程的目标是学习软件工程的科学理论知识,在实践中锻炼自我思考能力和团队开发能力这 ...
软工第三次作业——结对编程之最长单词链
项目内容这个作业属于哪个课程 2023北航敏捷软工这个作业的要求在哪里结对项目-最长单词链我在这个课程的目标是学习软件工程理论,在实践中体会并运用软件工程理论,收获团队开发和软件工程实践经 ...

word-wrap控制长单词或URL地址换行

word-wrap控制长单词或URL地址换行相关推荐

最新文章

热门文章