不使用"white-space: nowrap"如何实现文本溢出省略号？

Question

不使用"white-space: nowrap"如何实现文本溢出省略号？

javascripthtmlcss

34

我想知道是否有巧妙的方法可以在不需要应用white-space: nowrap的情况下实现CSS 省略效果。

换句话说，假设我们有一个特定高度的块级元素，我们希望让它填满文本内容，但是一旦水平方向加上垂直方向没有更多空间时，就应该应用省略号。

快速示例：http://jsfiddle.net/fpv9n/2/

文本应该保持原样，但也应该在末尾添加省略号。有没有使用CSS实现的方法？我也考虑使用JS解决方案。

- jAndy

jquery的dotdotdot插件看起来很棒。 - Jessica

发现了 Shave 这个 JS 插件，它可以非常好地根据给定的最大高度进行多行文本截断。它使用二分查找来找到最佳的断点。绝对值得研究。 - Chirag Ravindra

3个回答

30

使用纯CSS无法实现此功能。这很麻烦和令人沮丧。当您希望浏览器在多行文本溢出容器时“省略”可能溢出的文本时，我经常自己想要这样做。

- Bendoh

1

我只知道一些丑陋的解决方法，需要使用 content、绝对定位、辅助元素来控制点和填充。我认为最好的方式是将高度设置为行高的准确倍数，例如：

height: 2em;
font-size: 1em;
line-height: 1em;

- The Surrican

最好将行高设置为大约1.2em（通常是默认设置，无论字体如何），并且我建议在内部包含垂直填充。为了安全起见，使用em设置垂直填充。对于点，您可以将它们删除，并通过盒子阴影产生模糊效果，以避免将字母分成两半。 :) - G-Cyrillus

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- G-Cyrillus · Accepted Answer

更新：现在最新版本的浏览器支持使用 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>

end update

你可以使用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
}