两行文本溢出省略号

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

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

这是一个演示。

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

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

什么好主意吗?

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

当前回答

在我的angular应用程序中，下面的风格为我实现了对第二行文本溢出的省略号:

 <div style="height:45px; overflow: hidden; position: relative;">
     <span class=" block h6 font-semibold clear" style="overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box; 
        line-height: 20px; /* fallback */
        max-height: 40px; /* fallback */
        -webkit-line-clamp: 2; /* number of lines to show */
        -webkit-box-orient: vertical;">
        {{ event?.name}} </span>
 </div>

希望它能帮助到别人。

2019-03-01 09:50:26

其他回答

基于我在stackoverflow中看到的答案，我创建了这个LESS mixin(使用这个链接来生成CSS代码):

.max-lines(@lines: 3; @line-height: 1.2) {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: @lines;
  line-height: @line-height;
  max-height: @line-height * @lines;
}

使用

.example-1 {
    .max-lines();
}

.example-2 {
    .max-lines(3);
}

.example-3 {
    .max-lines(3, 1.5);
}

2017-10-24 11:21:20

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

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

     white-space:nowrap;

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

问候,

Mee

2013-04-09 18:41:19

简单的CSS属性可以做到这一点。下面是一个三行省略号。

display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;

2016-01-01 20:09:58

我的解决方案重用amcdnl之一，但我的后退包括使用文本容器的高度:

.my-caption h4 {
    display: -webkit-box;
    margin: 0 auto;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;

    height: 40px;/* Fallback for non-webkit */
}

2015-09-04 21:02:12

下面是一个使用jQuery管理省略号的简单脚本。它检查元素的实际高度，并创建一个隐藏的原始节点和一个截断的节点。当用户单击时，它会在两个版本之间切换。

这样做的最大好处之一是，“省略号”像预期的那样位于最后一个单词附近。

如果你使用纯CSS解决方案，这三个点看起来离最后一个单词很远。

2017-06-07 08:04:55

两行文本溢出省略号

推荐文章

最新文章

标签