文字溢出显示省略号的方法--at-lib网站目录

在网页中，如果文本溢出，我们可以用截字、限制宽度并隐藏内容的方法来进行修正。

但这种方法生硬，也不利于搜索引擎优化。
有些同学可能会发现一些网页上处理文字溢出的方案很好看，比如多余的字换做省略号（...）显示，而文字实际上没有减少。
这只是使用了CSS中text-overflow属性，这个属性比较特殊，在现在的CSS手册中找不到，但CSS3中有相关的描述：text-overflow-mode。
它有三个值：clip、ellipsis、ellipsis-word。 clip : 不显示省略标记（…），只是简单的裁切； ellipsis : 当对象内文本溢出时显示省略标记（…），省略标记插入的位置是最后一个字符。
ellipsis-word : 当对象内文本溢出时显示省略标记（…），省略标记插入的位置是最后一个词（word）。
text-overflow比较特殊，它不能单独起作用，而是必须跟在overflow:hidden后面作为补充说明使用。如果我们要给一个段落添加这个效果，那么可以写：p { white-space: nowrap; width: 100%; /* IE6 需要定义宽度 */ overflow: hidden; -o-text-overflow: ellipsis; /* Opera */ text-overflow: ellipsis; /* IE, Safari (WebKit) */ }在老版本的Firefox中并不支持text-overflow，因为声称它不符合W3C标准，不过后来在Firefox7中就支持了此类写法。

版权免责声明: 1、本站内容均来源于网络，请自行鉴定真假 2、如有侵权，违法，恶意广告，虚假欺骗行为等以上问题联系站长删除

此文由 at-lib网站目录编辑，未经允许不得转载！：

相关资讯