javascript - 仅当内容超出高度而不是宽度限制时，文本溢出省略号？

Question

我正在尝试找出一种在文本后显示省略号的方法，但只有当它达到高度而不是宽度的界限时，我知道这可以使用 text-overflow: ellipsis; 和white-space: nowrap; 用于宽度受限的元素，但无法计算出高度。

这是我的例子:https://jsfiddle.net/c7bmyc4e/1/

示例代码:

<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 id="p-two">
    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{
        margin: 20px;
        background: red;
        height: 100px;
        width: 300px;
}

#p-two {
        margin: 100px 20px 20px 20px;
        padding-bottom: 20px;
        height: 100px;
        overflow-y: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
}

Answer 1

For height ellipsis i have one CSS solution.

假设我有一个 h2 元素，我将在该 h2

上应用 css

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

这是 css 高度省略号

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;
}

注意:什么是-WebKit

WebKit is a HTML/CSS web browser rendering engine for Safari/Chrome.

浏览器渲染引擎列表

• 浏览器
  • 引擎:[三叉戟][2]
  • CSS 前缀:-msie
• 火狐
  • 引擎:[Gecko][3]
  • CSS 前缀:-moz
• 歌剧
  • 引擎:[Presto][4]
  • CSS 前缀:-o
• Safari 和 Chrome
  • 引擎:[WebKit][5]
  • CSS 前缀:-webkit

So for Safari/Chrome use -webkit in css and for other browser use css-prefix as mentioned above

上述解释的例子:https://jsfiddle.net/c7bmyc4e/4/