javascript - 没有“空白：nowrap”的文本溢出省略号？

Question

我想知道是否有任何巧妙的方法，无需应用也可以实现 css省略号效果white-space: nowrap。

换句话说，假设我们有一个特定高度的块元素，我们想让它被文本内容填充，但是一旦水平和垂直方向没有更多空间，就应该应用省略号.

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

文本应该是一样的，但最后也有一个省略号。有什么方法可以使用 CSS 来实现吗？我也会考虑 JS 解决方案。

Answer 1

使用纯 CSS 无法做到这一点。这是可怕的和可悲的。当您希望浏览器“省略”多行文本时，我自己经常希望这样做，并且每当它溢出容器时可能会溢出文本。

Answer 2

现在更新 CSSline-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
}

Answer 3

我只知道丑陋的变通方法，包括content绝对定位、保持点和填充的辅助元素。我认为最好让您的身高与您的线高完全相同，例如这样做：

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