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

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

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

连字符

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

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

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

分割词

单词分割也是不错的解决办法，用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，如果你在使用过程中发现问题了，可要记得反馈给我哦。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！