我正在尝试找出一种在文本后显示省略号的方法,但只有当它达到高度而不是宽度的界限时,我知道这可以使用 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;
}
最佳答案
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/
关于javascript - 仅当内容超出高度而不是宽度限制时,文本溢出省略号?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29984333/