CSS3 Text-overflow

如果看完了还不过瘾?想和作者深聊相关话题,可以点击这里向作者提问!

CSS3Text Effects属性一共有三个;text-shadow;text-overflow;word-wrap。其中text-shadowCSS3中一个常用的属性,在《CSS3 text-show》中专门介绍了关于text-shadow的特性和使用方法。今天主要跟大家一起来学习CSS3中有关文本效果的另一个属性:text-overflow的使用。

大家在平时的网页制作中一定碰到过内容溢出的问题,比如说文章列表很长,而其宽度又受到限制,此时超出宽度的内容就会以(...)显示。以前实现这样的效果都是由后台程序截取一定的字符数在前台输出,另外一种方法就是使用js截取一定的字符数来实现。可是这两种方法都有其不足之处,比如说中文 和英文的计算字符宽度的问题,这个值不好计算,所以造成截取字符数不好控制,从而其通用性也差。那么今天我们来尝试一下CSS3中的text-overflow这个属性,看他如何实现这样的效果。

语法:

  text-overflow : clip | ellipsis

 

取值说明:

1、clip:表示不显示省略标记(...),而只是简单的裁切,需要在一定的高度范围内配合overflow:hidden属性使用,如果不配合的话将无任何效果;

2、ellipsis:对象文本溢出时将显示省略标记(...),需要配合overflow:hidden;white-space:nowrap一起使用才会有效果。

兼容的浏览器

1、text-overflow: clip

2、text-overflow:ellipsis

text-overflow:clip所有浏览器都支持,但是text-overflow:ellipsis只有Firefox不支持,但有一些方法可以兼容解决这个问题,这个问题后面在来一起讨论,我们先从简单的开始。text-overflow:ellipsis应用在Opera浏览器下时,需要加上其前缀“-o-”。

下面我们先来看text-overflow中的clip的使用,别的先不说,大家一起来看下面的一段代码:

Html Code

   <div class="demo text-overflow-clip">
      test overflow clip effect test overflow clip effect text overflow clip effect
   </div>

 

CSS Code:

  .demo {
    width: 100px;
    padding: 10px;
    border: 1px solid #ccc;
  }
  .text-overflow-clip {
    text-overflow: clip;
  }

 

效果:

从上面的效果图中我们可以明显看出text-overflow:clip;没有起到任何作用。文字没有任何截切,此时的div自动撑高以适应内容的高度。那么你可以在本地把text-overflow:clip删除在看看效果。你会发现有没有text-overflow:clip都是一样的,那需要怎么做呢?前面说过需要在一定的高度范围内配合overflow:hidden才能有效果。那么现在给这个div加上50px的高度和overflow:hidden属性:

 .text-overflow-clip {
   text-overflow: clip;
   overflow: hidden;
   height: 50px;
 }

 

效果:

到这里我提议大家来个大胆的尝试,我们把上面代码中的text-overflow:clip注掉去

  .text-overflow-clip {
    /*text-overflow: clip;*/
    overflow: hidden;
    height: 50px;
  }

 

效果:

此时把两个效果图对比一下,看看有什么区别没有?不用我说,大家都知道,他们两是一模一样的效果,那么我在这里需要说明的一点是:text-overflow:clip这个属性在我们实际应用中根本是没有任何意义的,因为他离开了height和overflow无任何效果,当他有这两个属性配合时,达到的效果跟我们设置overflow:hidden效果一样,无任何区别,因此我们在实际应用中完全可以使用overflow:hidden来实现这样的效果。换句简单的话说:单独的text-overflow:clip起不到任何截切效果。

下面我们主要一起来看text-overflow:ellipsis属性的使用,开头有提到过,text-overflow:ellipsis在配合overflow:hidden;white-space:nowrap属性可以用来代替标题截取函数,这样一来有助于搜索引擎,打个比方说,我们标题有20个字符,而其宽度只能设置100px,如果采用标题的截取函数,那么这个标题就显示不够完整,要是我们使用text-overflow:ellipsis,标题输出是完整的,只不过是受到了其元素容器大小限制无法全部显示出来,此时就用(...)代替了被隐藏的部分。换句说,text-overflow:ellipsis属性只起到一个注解作用,为什么这么说呢?下面通过实例来证明。

Html Code:

   <div class="demo text-overflow-ellipsis">用我来测试text-overflow:ellipsis的性能和使用方法。</div>

 

CSS Code:

  .text-overflow {
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;		  
  }

 

效果:

剩余70%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/content/css3-text-overflow

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部