当文本在高度上溢出div时如何显示3个点[重复]

Posted 2023-03-04

【中文标题】当文本在高度上溢出div时如何显示3个点[重复]

【英文标题】：How to display 3 dots when text overflow div in height [duplicate]

【发布时间】：2021-06-23 17:23:51

【问题描述】：

文本在高度上溢出 div 时如何显示 3 个点。我找到了一个示例，当文本在宽度上溢出 div 时如何做到这一点

.cut-text  
  text-overflow: ellipsis;
  overflow: hidden; 
  width: 160px; 
  height: 1.2em; 
  white-space: nowrap;


<div class="cut-text">
I like big butts and I can not lie
</div>

但我找不到如何显示...当文本在高度上溢出 div 时。 非常感谢任何帮助

【问题讨论】：

这能回答你的问题吗？ Text overflow ellipsis on two lines

【参考方案1】：

您可以通过 '-webkit-line-clamp' css 属性实现高度副文本省略号。根据您希望点出现的行号使用数字。

.cut-text  
  width: 160px; 
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;

<div class="cut-text">
I like big butts and I can not lie I like big butts and I can not lieI like big butts and I can not lieI like big butts and I can not lieI like big butts and I can not lieI like big butts and I can not lieI like big butts and I can not lieI like big butts and I can not lieI like big butts and I can not lieI like big butts and I can not lieI like big butts and I can not lieI like big butts and I can not lieI like big butts and I can not lieI like big butts and I can not lieI like big butts and I can not lie
</div>