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

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

这是一个演示。

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

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

什么好主意吗?

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


当前回答

这是一个完全的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;
    }

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

其他回答

将两个类组合在一起似乎更优雅。如果只有一行,你可以删除两行类:

.ellipse { white-space: nowrap; display:inline-block; overflow: hidden; text-overflow: ellipsis; } .two-lines { -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; white-space: normal; } .width{ width:100px; border:1px solid hotpink; } <span class='width ellipse'> some texts some texts some texts some texts some texts some texts some texts </span> <span class='width ellipse two-lines'> some texts some texts some texts some texts some texts some texts some texts </span>

下面的Css应该可以做到。

在第二行之后,文本将包含…

line-height: 1em;
max-height: 2em;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;

你可以使用一个溶解的效果代替省略号,纯CSS,看起来更专业:

    <div style="width: 293px; height:48px; overflow: hidden; ">
        More than two line of text goes here-More than two line of text goes here
    </div>
    <div style="position: relative; top: -24px; width: 293px; height:24px; 
             background: linear-gradient(90deg, rgba(255,0,0,0) 40%, rgba(255,255,255,1) 99%);">
    </div>

这里我假设你的背景颜色是白色。

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

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

     white-space:nowrap;  

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

问候,

Mee

这是一个完全的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;
    }

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