Javascript 仅当内容超过高度而非宽度限制时，文本溢出省略号？

我试图找出一种在文本后显示省略号的方法，但只有当它达到高度而不是宽度的界限时，我知道这可以通过使用

文本溢出：省略号和
空白：nowrap用于宽度受限元素，但无法计算高度



 <h2>Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
 sed diam nonumy eirmod tempor invidunt ut labore et.</h2>

以下是我的例子：

示例代码：

<p id="p-one">
    Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
</p>


文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本




文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本

p{
利润率：20px；
背景：红色；
高度：100px；
宽度：300px；
}
#p-2{
利润率：100px 20px 20px 20px；
垫底：20px；
高度：100px；
溢出y：隐藏；
文本溢出：省略号；
空白：nowrap；
}

对于高度省略，我有一个CSS解决方案

假设我有一个h2元素，我将对该h2应用css



注意：什么是-WebKit

WebKit是用于Safari/Chrome的HTML/CSS web浏览器呈现引擎

用于Web浏览器的渲染引擎列表


IE

引擎：[三叉戟][2]
CSS前缀：
-msie

Firefox

引擎：[壁虎][3]
CSS前缀：
-moz

歌剧

引擎：[Presto][4]
CSS前缀：
-o

Safari和Chrome

引擎：[WebKit][5]
CSS前缀：
-webkit


因此，对于Safari/Chrome而言，请在css中使用-webkit，以及其他
如上所述，浏览器使用css前缀

上述解释的示例：
看看这个问题->查看Mobify上的这篇文章：。当然符合CSS卓越使用的“哇哦！”类别：）这是因为它不支持多行文字。@FelipeAls Sweet，你想把它作为答案发布吗？@Ilja，你可以在提交之前通过检查“社区维基”将对你有用的代码作为答案发布，然后接受它，所以这将有助于其他用户。@KevalBhatt有趣的解决方案，您愿意发布is作为答案吗？


 <h2>Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
 sed diam nonumy eirmod tempor invidunt ut labore et.</h2>



h2 {
  display: block; /* Fallback for non-webkit */
  display: -webkit-box;
  max-width: 400px;
  height: 26*1.4*3; /* Fallback for non-webkit */
  margin: 0 auto;
  font-size:26px;
  line-height: 1.4;
  -webkit-line-clamp:3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}