css处理元字符,CSS中“字符串”的处理妙招

原标题：CSS中“字符串”的处理妙招

大家都知道，网页是由丰富的内容组成的，那内容是由什么组成的呢？你们的答案或许不一，但无外乎，总结起来我们可以说是由一系列字符串组成的，因此每个参与网页设计的人都不得不好好学点处理字符串的小技巧。

平时在手机端浏览网页，你或许看到过各种失败的字符串处理案例，因而导致页面布局视觉感很糟糕，就像上面图片的情况一样，本文给大家提供几个还不错的处理方法。

连字符

处理长字符串的第一个解决方案是使用适当的连字符，如下图：

浏览器：所有主要的浏览器都支持，除了Chrome,Opera,Android ，我还测试过Windows平台的Safari 5.1，在测试词中增加了连字符，但显示位置错误，因此毫无意义。此外，连字符语言灵敏，必须在父级元素中定义lang属性，但只支持英文浏览器。

你也可以使用一个JS库，Hyphenqtor.js一文，阐述了各种浏览器中的多种语言，唯一的不足就是你必须加载很多额外的JS，较长的文本可能会损害性能。

分割词

单词分割也是不错的解决办法，用CSS属性直接判定是否需要对词进行分割。

浏览器：CSS词分割支持任一浏览器，除了Opera Mini和基于Presto排版引擎的旧版Opera浏览器。

自动换行

使用自动换行法，需判定浏览器能否自动在词与词之间断句。

浏览器：CSS自动换行支持在每一个浏览器。注意：有些浏览器需要旧系统才能运行。

省略

处理较长字符串还可以妙用省略号。

浏览器：文字溢出支持主要浏览器，将每行文本截断后，即使使用短词，也会打破网格线。此外，文字可以以某种方式缩短，但会改变其真正含义。不建议常使用文本溢出，如果真有需要，可在服务器端完整文本之后进行缩减。

结论：

测试过以下26种浏览器：IE7，IE8，IE9，IE10和IE11，Edge，Firefox 39(Windows、Linux、Mac)、Chrome 44(Windows、Linux、Mac)，Opera 30(Windows，Mac)，Safari 8(MAC)，Safari 5.1(Windows)，Android 5(Nexus 6)，Android 4.4(Nexus 5)，Android 2.3(Galaxy S2)，iOS 8.3(iPhone 6)，iOS 7(iPhone 5S)，iOS 6(iPhone5)，Opera Mini(Android 5)，Opera(Android 5)，Opera Mobile(Android 5)和Windows Phone 8.1(Lumia 930)，使用了真正的设备和浏览器堆栈，下面是测试结果：

虽然大多数情况下，在Firefox浏览器上，连字符在断句之间并不好用(虽然支持)，但毕竟词分割在Opera Mini上是直接不支持的。

最终解决方案

该解决方案完全支持每个浏览器，无论是连字符还是分割词，虽然已经在26个不同的浏览器测试了此方案，但我依然不能100%确定不会出现任何bug，如果你在使用过程中发现问题了，可要记得反馈给我哦。

撰稿，欢迎交流，了解更多请关注()

微信公众号： zhi_neng_she

资源共享群：53331965返回搜狐，查看更多

责任编辑：