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

最新推荐文章于 2024-06-02 09:41:18 发布

扶公瑾以苏

最新推荐文章于 2024-06-02 09:41:18 发布

阅读量2k

点赞数 2

分类专栏：前端文章标签：单词换行 URL地址换行 word-wrap

本文链接：https://blog.csdn.net/qq_36470686/article/details/82818890

版权

前端专栏收录该内容

27 篇文章 0 订阅

订阅专栏

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

扶公瑾以苏

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
word-wrap控制长单词或URL地址换行

有时候文本内容中包含了特别长的单词或特别长的URL地址——URL地址既不包含半角空格，也不包含连字符，因此当浏览器窗口较窄时，浏览器下部将会出现滚动条，用户只有通过拖动滚动条才能看到全部内容。如果需要改变浏览器的默认行为，则可通过word-wrap属性进行设置。该属性支持如下两个值。normal:靠浏览器默认规则进行换行。 break-word:设置允许在单词中间换行。为了让浏览...
复制链接

扫一扫

专栏目录