搜索 用户中心
  • 欢迎光临三九网站目录 , 快审50元/站,快审请联系站长QQ:704918986
    当前位置 首页 > 教程收藏 > 其它教程
    文字溢出显示省略号的方法
        发布时间:2015-10-25 15:31:50    发布作者:admin
    在网页中,如果文本溢出,我们可以用截字、限制宽度并隐藏内容的方法来进行修正。
    但这种方法生硬,也不利于搜索引擎优化。 
    有些同学可能会发现一些网页上处理文字溢出的方案很好看,比如多余的字换做省略号(...)显示,而文字实际上没有减少。  
    这只是使用了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中就支持了此类写法。


    zVf三九网站目录

    下一篇:CSS找bug的口诀
    最新资讯
    最新收录
    热门资讯