[分享]css3截取文本

CSS3是前端开发中重要的一部分，它使得我们可以实现各种炫酷的效果。其中，截取文本功能是CSS3常用的一部分。CSS3截取文本让我们可以在文字显示不下的时候，采用省略号等方式处理文本。.ellipse...

CSS3是前端开发中重要的一部分，它使得我们可以实现各种炫酷的效果。其中，截取文本功能是CSS3常用的一部分。CSS3截取文本让我们可以在文字显示不下的时候，采用省略号等方式处理文本。

.ellipse {
  white-space: nowrap;  /* 文字不换行 */
  overflow: hidden;  /* 隐藏超出部分 */
  text-overflow: ellipsis;  /* 使用省略号代替超出部分 */
} 

以上代码是采用省略号处理文本的一种方式。这里使用了三个属性：

• white-space: nowrap;：让文字不进行换行；
• overflow: hidden;：让文本溢出部分隐藏掉；
• text-overflow: ellipsis;：使用省略号代替超出部分。

除了省略号，我们还可以使用其他形式的截取文本，如只显示一部分文本。以下代码演示只显示前20个字符：

.cut {
  display: -webkit-box;  /* 布局方式为box模型 */
  -webkit-box-orient: vertical;  /* 垂直方向排列 */
  -webkit-line-clamp: 1;  /* 只显示一行 */
  overflow: hidden;  /* 隐藏超出部分 */
} 

上述代码使用了-webkit-前缀，因为该方案目前只兼容webkit内核的浏览器。使用该方案将文本截取为多少行，完全取决于-webkit-line-clamp的值。在本例中，我们只显示一行文本，超出部分将被隐藏掉。

最后值得一提的是，这些截取文本的功能，不仅可以运用于文字，也可以使用在图片等元素上。值得开发者掌握和深入了解应用。