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

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

假设我有一个 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是Safari / Chrome的HTML / CSS网络浏览器渲染引擎。

网络浏览器的渲染引擎列表

的 IE

引擎：[Trident] [2]

CSS-prefix：-msie

的火狐

引擎：[Gecko] [3]

CSS-prefix：-moz

的戏

发动机：[Presto] [4]

CSS-prefix：-o

Safari＆amp;铬

引擎：[WebKit] [5]

CSS-prefix：-webkit

因此 Safari / Chrome 在 css 中使用 -webkit 以及其他浏览器使用 css-prefix ，如上所述

上述说明示例：https://jsfiddle.net/c7bmyc4e/4/

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

1 个答案: