分类目录 共计收录4275站; 资讯文章4395篇; 待审网站 640站; 当月收录1站; 今日审核0站; 已收到1个打赏!
快审详情
快审qq
首页 > 教程收藏 > 特效教程

文字溢出显示省略号的方法

在网页中,如果文本溢出,我们可以用截字、限制宽度并隐藏内容的方法来进行修正。
但这种方法生硬,也不利于搜索引擎优化。 
有些同学可能会发现一些网页上处理文字溢出的方案很好看,比如多余的字换做省略号(...)显示,而文字实际上没有减少。  
这只是使用了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中就支持了此类写法。


W6E网站目录

此文由 网站目录 编辑,未经允许不得转载!:

评论 暂无评论
-->