文本溢出显示省略号

单行文本

使用text-overflow属性

• text-overflow，控制文本溢出时显示的方式，ellipsis则是将溢出的内容替换为省略号。
• white-space，控制元素内空格与换行的处理方式，nowrap则将文本限制在一行内显示。

代码：

<div  style="width: 200px;  
      overflow: hidden; 
      text-overflow:ellipsis;
      white-space:nowrap;">
      云想衣裳花想容，春风拂槛露华浓。若非群玉山头见，会向瑶台月下逢
</div>

效果图：

多行文本

使用-webkit-box布局

• -webkit-box，布局将创建一个基于盒子的布局，其中元素按照水平或垂直方向排列。
• -webkit-box-orient，控制元素的排列方向。
• -webkit-line-clamp，指定元素文本的最大行数，并在最后一行添加省略号。

代码：

<p  style="width: 200px;  
    overflow: hidden; 
    display: -webkit-box; 
    -webkit-box-orient: vertical; 
    -webkit-line-clamp: 2;">
    云想衣裳花想容，春风拂槛露华浓。若非群玉山头见，会向瑶台月下逢
</p>

效果图：

其它方法

slice截取再拼接

• 手动测试大概需要多少个字符开始显示省略号。
• 使用slice等字符串裁剪相应长度的文本，直接拼接省略号显示。
• 字符会因为数字、英文、汉字等字体宽度不同，导致实际宽度不准确。

::after显示省略号

• 使用document新建一个和文本元素基本一致的样式，向里面填写需要显示的文本，得到文本的实际宽度。
• 如果实际宽度达到需要显示省略号的宽度，则给元素的::after的content填充省略号。
• 初始时，元素的ellipisis属性值为空。
• 判断完成后，对ellipisis进行赋值即可使省略号显示。
• 步骤麻烦，且可能导致省略号将最后一个字符仅遮盖部分。
• 另外，多行时需要注意行高与元素高度的关系，避免最后一行字只显示上半截。

代码：

<div style="
    position: relative;
    width: 200px;
    line-height: 20px;
    overflow: hidden;
    max-height: 40px;
" ellipsis="...">
    云想衣裳花想容，春风拂槛露华浓。若非群玉山头见，会向瑶台月下逢。
</div>

div::after {
    position: absolute;
    content: "" attr(ellipsis) "";
    left: 180px;
    top: 20px;
}

效果图：

绝对定位元素

• 同上的思路，::after可以替换为一个内容为省略号的元素

<div>  // 添加一个外层父元素
    <div>原文本元素</div>
    <div>...</div>   // 绝对定位到原文本元素的末尾，覆盖该位置的文字以显示内容
<div>