我想知道是否有巧妙的方法可以在不需要应用white-space: nowrap
的情况下实现CSS 省略效果。
换句话说,假设我们有一个特定高度的块级元素,我们希望让它填满文本内容,但是一旦水平方向加上垂直方向没有更多空间时,就应该应用省略号。
快速示例:http://jsfiddle.net/fpv9n/2/
文本应该保持原样,但也应该在末尾添加省略号。有没有使用CSS实现的方法? 我也考虑使用JS解决方案。
我想知道是否有巧妙的方法可以在不需要应用white-space: nowrap
的情况下实现CSS 省略效果。
换句话说,假设我们有一个特定高度的块级元素,我们希望让它填满文本内容,但是一旦水平方向加上垂直方向没有更多空间时,就应该应用省略号。
快速示例:http://jsfiddle.net/fpv9n/2/
文本应该保持原样,但也应该在末尾添加省略号。有没有使用CSS实现的方法? 我也考虑使用JS解决方案。
更新:现在最新版本的浏览器支持使用 CSS line-clamp
。
p:first-of-type {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
color:#777
}
<h2>Run that snippet to find out if your browser understand this</h2>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris
placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus
enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis
luctus, metus</p>
<h3>same text below, not clamped.</h3>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris
placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus
enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis
luctus, metus</p>
你可以使用content: '...'和position:absolute;来模拟省略号;
在一定行数内设置高度(最后可能需要添加垂直填充)
http://jsfiddle.net/V3ZQH/
span {
background-color: red;
width: 100px;
/*height: 50px;*/
height:2.4em;
display: block;
overflow: hidden;
text-overflow: ellipsis;
/*white-space: nowrap; */
position:relative;
padding:0 0.5em;
}
span:after {
content:'...';
background:inherit;
position:absolute;
bottom:0;
right:0;
box-shadow:0 0 5px red
}
使用纯CSS无法实现此功能。这很麻烦和令人沮丧。当您希望浏览器在多行文本溢出容器时“省略”可能溢出的文本时,我经常自己想要这样做。
我只知道一些丑陋的解决方法,需要使用 content
、绝对定位、辅助元素来控制点和填充。我认为最好的方式是将高度设置为行高的准确倍数,例如:
height: 2em;
font-size: 1em;
line-height: 1em;