没有"white-space: nowrap"的文本溢出省略符

text-overflow ellipsis without "white-space: nowrap"?

本文关键字：quot 溢出省 文本 white-space 没有 nowrap      更新时间：2023-09-26

我想知道是否有任何聪明的方法来实现css 省略号效果而不需要应用white-space: nowrap。

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

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

文本应该像它一样，但也要在结尾加一个省略号。有什么方法可以用CSS实现吗?我也会考虑JS解决方案

使用纯CSS是无法做到这一点的。这是可怕的和悲伤的。当您希望浏览器在多行文本溢出容器时"省略"可能溢出的文本时，我自己也经常希望这样做。

更新现在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;设置height在number of line (add最终垂直填充)
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
}

我只知道丑陋的工作涉及content，绝对位置，辅助元素持有点和填充。我认为最好将你的高度精确地设置为行高的倍数，例如这样做:

height: 2em;
font-size: 1em;
line-height: 1em;
相关文章：