回旧版

我爱导航网_我爱网址导航_网站酷站免费导航,尽在我爱导航!

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

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


文章来自:我爱导航,未经允许不得转载!:首页 > 教程收藏 > 建站经验 » 文字溢出显示省略号的方法

感觉不错,很赞哦! ( )

相关推荐

网友评论