[分享]css3按行截断

CSS3按行截断是指在一行内容超出某一宽度时，将超出的部分隐藏，并在省略号处截断。这是在多行文字中现实省略号的一种实现方式。实现该效果的CSS属性是textoverflow，它有三个取值：textov...

CSS3按行截断是指在一行内容超出某一宽度时，将超出的部分隐藏，并在省略号处截断。这是在多行文字中现实省略号的一种实现方式。

实现该效果的CSS属性是text-overflow，它有三个取值：

text-overflow: clip; /*裁剪*/
text-overflow: ellipsis; /*省略号*/
text-overflow: string; /*字符串*/ 

其中，clip值表示裁剪超出宽度的文字，直接隐藏超出的内容；ellipsis值则将超出的部分省略为三个点（...）；string值则将超出的部分替换为指定的字符串。

使用text-overflow属性时，还需要设置white-space和overflow属性。white-space属性用于控制是否允许换行，取值包括normal、nowrap、pre、pre-wrap和pre-line等；overflow属性用于控制超出部分的处理方式，取值包括visible、hidden、scroll和auto等。

.line-clamp {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
} 

以上代码就是使用text-overflow属性实现按行截断文字的例子，类名为line-clamp。该类的作用是将一行内容超出一定宽度时，将超出的部分截断为三个点。

除此之外，还可以使用JavaScript实现按行截断的效果。例如，使用jQuery的dotdotdot插件：

$(function() {
    $('.line-clamp').dotdotdot({
        height: 50, /*限定高度*/
        wrap: 'letter', /*按字母包裹*/
        fallbackToLetter: true /*回落到字母*/
    });
}); 

以上代码会将类名为line-clamp的元素的内容限定在50px的高度范围内，并在超出时按字母进行截断，最后将超出的部分替换为省略号。

综上所述，CSS3按行截断既可以通过text-overflow属性实现，也可以通过JavaScript的插件实现。使用时，还需要根据实际需求来选择对应的属性和插件。