CSS控制单行（多行）文本超出后隐藏or显示省略号（...）

深碍√TFBOYSˉ_ 2022-05-14 02:38 299阅读 0赞

文本超出部分隐藏一般分为单行和多行，下面主要介绍两种方法

## 一、单行文本隐藏显示省略号 ##

.ljl { width: 200px; overflow: hidden; text-overflow:ellipsis; white-space: nowrap; }

## 二、多行文本超出显示省略号（常用方法1） ##

**1、（因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端）**

.ljl { width: 200px; overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

注：CSS3 text-overflow 属性主要有：clip，ellipsis，string  
![这里写图片描述][70]

**2、利用伪类**

<div id="con">
      <span id="txt">文本溢出显示省略号,文本溢出显示省略号,文本溢出显示省略号,文本溢出显示省略</span>
      <span class="t"></span>
    </div>
    <style> #txt{ display: inline-block; height: 40px; width: 250px; line-height: 20px; overflow: hidden; font-size: 16px; } .t:after{ display: inline; content: "..."; font-size: 16px; } </style>

**3、利用绝对定位和padding;(跨浏览器解决方案)**

<p id="con2">文本溢出显示省略号,文本溢出显示省略号,文本溢出显示省略号,文本溢出显示省略<span class="t2">...</span>
    </p>
    <style> #con2{ position: relative; height: 40px; width: 250px; line-height: 20px; overflow: hidden; padding-right: 12px; } .t2{ position: absolute; right: 0; bottom: 0; } </style>

这个方法的原理是：首先在包含文字的元素里，嵌入一个…，然后包含文字的元素右侧留出…的位置(padding-right),最后利用绝对定位将…定位至右侧的padding-right区域。

--------------------

*后面的2和3方法有点小bug，文本不足就会显示省略号，慎用~~*

[70]: /images/20220514/1b3f0cabdb7d4a1ca2d752988a652e19.png