首页 » 网站建设 »

CSS的word-wrap:break-word属性

2015年8月15日 / 180次阅读
CSS

打开支付宝首页,搜索“529018372”,即可领取红包!可重复领。

特色图片

CSS中的word-wrap:break-word属性是用来规定文字换行的策略。

word-wrap:break-word表示将打破为文字结束为换行依据的方式,比如一个很长的英文单词,设置这个属性可以让换行发生在这个英文单词中间某个位置。

例如:

<!DOCTYPE html>
<html>
<head>
<style>
p.test
{
width:11em;
border:1px solid #000000;
word-wrap:break-word;
}
</style>
</head>
<body>
<p class="test">This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</p>
</body>
</html>

 

以上代码的执行结果为:

word-wrap:break-word属性让换行发生在英文单词中间

word-wrap:break-word属性让换行发生在英文单词中间

这样的做法,我是不喜欢的,用户体验会很差。

而且,我的云上小悟是个中文为主的站,中文每个字的长度是固定的,所以,这个word-wrap:break-word属性对于中文也基本没有什么作用。弃之不用,将代码中的这个属性全部去掉,观察页面完好无损,而且,还减小了页面的大小,何乐而不为呢!

 

将word-wrap:break-word这个属性弃之不用了之后,发现了个小问题,有些文章链接很长,而且中间没有-,造成页面的轻微混乱。因此,以后要注意,页面链接不易过长,要注意适当使用-。

 

2017-09-30:

这个属性还是应该保留的。有的时候不注意,就造成网页不适应移动端的小页面。

本文链接:http://www.maixj.net/wz/word-wrap-break-word-7538
云上小悟 麦新杰(QQ:1093023102)

相关文章

评论是美德

无力满足评论实名制,评论对非实名注册用户关闭,有事QQ:1093023102.


前一篇:
后一篇:

栏目精选

云上小悟,麦新杰的独立博客

Ctrl+D 收藏本页

栏目

AD

ppdai

©Copyright 麦新杰 Since 2014 云上小悟独立博客版权所有 备案号:苏ICP备14045477号-1。云上小悟网站部分内容来源于网络,转载目的是为了整合信息,收藏学习,服务大家,有些转载内容也难以判断是否有侵权问题,如果侵犯了您的权益,请及时联系站长,我会立即删除。

网站二维码
go to top