css word-break 和 word-wrap自动换行详解

  次阅读 作者:智能小宝 来源:互联网 2016-03-25 16:14 我要评论(0)

前几天组内有同学问我关于单字节的长字符截断问题,原以为很简单的只要用word-break:break-all;和word-wrap:break-word;就能解决所有问题了。事实上这个的确能让长字符的单字节文本在块元素中被截断

突然间发觉自己一直以来都是用以前的思维方式在写页面,很多细节的东西并未注意到。虽然是被截断了,但细节的问题还是存在,比如一个单词不希望被截断的时候也被截断了,这样就悲催了。

正常来说,一个英文单词再怎么样也不太可能会非常非常的长,一般都是测试人员在做页面测试的时候,使用了很长很长的单字节连续的字符,才会出现这样的问题。那么如果这个时候把word-break:break-all;换成word-break:keep-all;的话,情况又会改变了,如图:

单词能正常显示,而很长的长字符就会被强制换行了。上面两张截图是来自 Chrome 20.0.1132.57 m 版本的浏览器,如果在FF和IE中查看的话,IE这神奇的宝贝又出现了一个情况,中文字符中,以标点符号为基准来强制换行,如果没有标点符号的话,那么又一切正常,如图:

这个时候我已经开始迷惑了,到底应该是用哪个好呢?正常来说我们肯定是希望单词能正常换行而不是强制被断行,如果是这样的话,我们就应该是使用word-break:keep-all;和word-wrap:break-word;的组合,但这样的话,IE浏览器的换行实在是太过于可怕了,纠结埃

思前想后,这个还是以文本能正常被截断,还是放弃IE这个鸟玩意,断行就用word-wrap:break-word;这样一个算了吧,使用word-wrap:break-word;这个的话,各个浏览器都支持强制换行,如果遇到空格或者标点符号也会换行,一切都是那么滴完美。 (^。^)y-~~

下面这个是我测试时使用的HTML代码结构

<div class="word_break">文字啊文字,这里其实就是文字,想要更多的文字,那就开始复制……文字啊文字,这里其实就是文字,想要更多的文字,那就开始复制……文字啊文字,这里其实就是文字,想要更多的文字,那就开始复制……假如这里的文字内容是很长很长的话又没有标点符号的话那将会是怎么样的效果呢。结束!</div>

代码如下

复制代码

<div class="word_break">test text txt word copy now! test texttexttexttexttext txt word copy now! test text txt word copy now! test text txt word copy now! test text txt word copy now! test text txt word copy now! test text txt word copy now! </div>

<div class="word_break">assssssssssssssssssssssssssssssssssssssssss333333333

代码如下

复制代码

412341234adsfadfzxcvzcvdfgfnasdfadzvasdf234234adfvczx

代码如下

复制代码

cvasdfasdf234adfzszxcvasdfasdf234234234azcvasdfad

代码如下

复制代码

fasdf234adfasdf</div>

然后这个是CSS代码,这部分的代码是结合word-break 和 word-wrap 在各个浏览器中的效果 用力点击蓝色文字

这段代码

代码如下

复制代码

.word_break {float:left;width:200px;margin:10px;padding:10px;font-size:16px;font-family:simsun;border:1px solid #242424;zoom:1;}

本站文章信息来源于网络以及网友投稿,本站只负责对文章进行整理、排版、编辑,是出于传递更多信息之目的,并不意味着赞同其观点或证实其内容的真实性。如果您有什么意见或建议,请联系QQ28-1688-302!

人工智能实验室
相关文章相关文章
  • 无人驾驶汽车如何改变城市生活?听听他们怎么说

    无人驾驶汽车如何改变城市生活?听听他们怎么说

  • 未来两年人工智能要怎么走?看这篇就够了

    未来两年人工智能要怎么走?看这篇就够了

  • 韩春雨称已能重复实验结果 近期将有消息公布

    韩春雨称已能重复实验结果 近期将有消息公布

  • 英国研发“杀生”机器人 通过生命体获取能量

    英国研发“杀生”机器人 通过生命体获取能量

网友点评网友点评
阅读推荐阅读推荐

据国外媒体报道,在过去两年内,聊天机器人(chatbot)、人工智能以及机器学习的研发和采用取得了巨大进展。许多初创公司正利用人工智能和...

霍金 视觉中国 图 英国著名物理学家霍金(Stephen Hawking)再次就人工智能(AI)发声,他认为:对于人类来说,强大AI的出现可能是最美妙的...

文|郑娟娟 今年,人工智能(AI) 60岁了。在AI60岁的时候,笔者想要介绍一下AI100,一个刚刚2岁的研究项目,但它的预设寿命是100年,甚至更长...

AlphaGo与李世石的人机大战,为大众迅速普及了人工智能的概念。 但对谷歌而言,除了下围棋,现在的人工智能进展到哪一步了?未来,人工智能...