我知道您可以使用CSS规则的组合,使文本在溢出(超出父边界)时以省略号(…)结束。

是否有可能(请随意说,不)达到同样的效果,但让文本换行不止一行?

这是一个演示。

div {
  width: 300px; 
  height: 42px; 
  overflow: hidden; 
  text-overflow: ellipsis; 
  white-space: nowrap;
}

如您所见,当文本的宽度超过div的宽度时,文本以省略号结束。但是,仍然有足够的空间让文本换行成第二行并继续。这被空白符:nowrap打断,这是省略号工作所必需的。

什么好主意吗?

附注:没有JS解决方案,如果可能的话,纯CSS。


当前回答

这是适合我的解决方案,因为我知道每个人想要的结果可能不同。

display: -webkit-box;
min-height: 109.2px;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.625; /* as per desire */

其他回答

不知道你的目标是什么,但是你想让文本出现在第二行吗?

这是你的jsFiddle: http://jsfiddle.net/8kvWX/4/刚刚删除以下:

     white-space:nowrap;  

我不确定这是否是你想要的。

问候,

Mee

对于那些在scss中工作的人,你需要在注释的开头添加!autoprefixer,这样它就会为postcss保留:

我遇到了这个问题,这就是为什么把它贴在这里

line-height: 1em;
max-height: 2em;
display: -webkit-box;
/*! autoprefixer: off */
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;

参考

          text-overflow: ellipsis;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          line-height: 36px;
          max-height: 18px;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;

我发现了一个线夹和线高的组合:D

这是一个完全的hack,但它是有效的:

http://jsfiddle.net/2wPNg/

div {
    width: 30%;
    float: left;
    margin-right: 2%;
    height: 94px;
    overflow: hidden;
    position: relative;
}

div:after {
     display: block;
      content: '...';
      width: 1em;
  height: 1.5em;
  background: #fff;
  position: absolute;
  bottom: -6px;
  right: 0;
    }

它确实有问题....它可能会笨拙地切断一个字母,并且在响应式站点上可能会出现一些奇怪的结果。

看看这个纯css版本:http://codepen.io/martinwolf/pen/qlFdp

h2 { 显示:-webkit-box; max-width: 400 px; -webkit-line-clamp: 2; -webkit-box-orient:垂直; 溢出:隐藏; 文本溢出:省略; } <h2> .</h2> .</h2> .</h2> .</h2> .</h2> .</h2> .