html文字纵向排列切断,css实现文字截断效果

在制作页面时，有时会出现对文本采取截断处理的需求：规定文本的长度，超出部分则截断，并以省略号...替代

1、单行文本的截断

单行文本的截断需要用到的主要的一个属性是：text-overflow

text-overflow: clip | ellipsis | string

属性值

描述

clip

修剪文本 (默认值，无其他省略标记)

ellipsis

显示省略符号来代表被修剪的文本

string

使用给定的字符串来代表被修剪的文本。(大多数浏览器不支持，仅Firefox9及以上支持)

当然，仅仅使用这个属性是无法实现效果的，单行文本实现截断效果，就需要使文本不能换行(white-space: nowrap;)，同时，将文本超出部分隐藏掉(overflow：hidden;)，最后再使用 text-overflow: ellipsis;(文本溢出时显示省略号标记...)。

示例代码如下：

.word_cut {

white-space: nowrap; /* 文本不换行 */

overflow: hidden;

text-overflow: ellipsis; /* 文本溢出时显示省略号标记... */

}

2、多行文本的截断

上面所介绍的text-overflow属性只作用于单行文本，在多行文本中是不起作用的，然而，多行文本的截断效果也是一种常见的需求。下面，整理了其中一种实现方法：

使用-webkit-line-clamp属性来实现，同时还需要与其他相关的属性配合，示例代码如下：

.word_cut {

display: -webkit-box;

-webkit-box-orient: vertical;

-webkit-line-clamp: 2;

overflow: hidden;

text-overflow: ellipsis;

}

display: -webkit-box，表示将父级元素变为弹性盒模型

-webkit-box-orient属性，设置子元素的排列方式，horizontal(默认值，水平排列)，vertical(垂直排列)

-webkit-line-clamp属性，控制文本显示的行数

从以上代码中的 -webkit- 不难发现，这只适用于webkit内核的浏览器，其他浏览器的低版本并不支持此属性，IE更是11及以下都不支持，因此，兼容性不是特别好。不过，由于移动端的浏览器多数是webkit内核，因此，此属性更适用于移动端页面。