css-实现多行文本溢出显示省略号

xyc

      项目中经常用遇到文本太长都显示了太长，不够美观，只想显示几行，剩余部分显示省略号，今天我们就来说说具体怎么实现。
      实现方法：
      

[XML] 纯文本查看 复制代码

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;

      下面咱们在正常情况下和加过这段代码之后的不同做下演示。
      1.正常代码：
      

[XML] 纯文本查看 复制代码

<style>
.txt{
    width:200px;
    border:1px solid #ddd;
}
</style>
<p class="txt">溢出文字隐藏溢出文字隐藏溢出文字隐藏溢出文字隐藏溢出文字隐藏溢出文字隐藏溢出文字隐藏溢出文字隐藏溢出文字隐藏溢出文字隐藏</p>

    效果：
   

    2.调整过后代码：
   

[XML] 纯文本查看 复制代码

<style>
.txte{
    width:200px;
    border:1px solid #ddd;
    display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}
</style>
<p class="txte">溢出文字隐藏溢出文字隐藏溢出文字隐藏溢出文字隐藏溢出文字隐藏溢出文字隐藏溢出文字隐藏溢出文字隐藏溢出文字隐藏溢出文字隐藏</p>

      效果：
      
      这样文本就只显示两行了，以上就是多行文本溢出显示省略号的实现方法，希望可以帮助到大家！

范范

支持支持