第二行的css省略号

Question

text-overflow: ellipsis第二行的CSS ,这可能吗？我在网上找不到它.

例:

我想要的是这样的:

I hope someone could help me. I need 
an ellipsis on the second line of...

但是发生了什么事:

I hope someone could help me. I ... 

Answer 1

这应该适用于webkit浏览器:

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

Answer 2

一种用于要求text-overflow: ellipsis;对工作是一个单行的版本white-space(pre,nowrap等).这意味着文本永远不会到达第二行.

人机工程学.在纯CSS中不可能.

当我刚才寻找完全相同的东西时我的来源:http://www.quirksmode.org/css/textoverflow.html(Quirksmode ftw!)

编辑如果好的CSS神将实现http://www.w3.org/TR/css-overflow-3/#max-lines,我们可以使用fragments(新)和max-lines(新)在纯CSS中隐藏它.还有一些关于http://css-tricks.com/line-clampin/的信息

编辑2 WebKit/Blink有line-clamp:-webkit-line-clamp: 2将省略号放在第二行.

Answer 3

正如其他人已经回答的那样,纯CSS解决方案不存在.有一个非常容易使用的jQuery插件,它被称为dotdotdot.它使用容器的宽度和高度来计算是否需要截断并添加省略号.

$("#multilinedElement").dotdotdot();

这是一个jsFiddle.

Answer 4

我发现Skeep的答案还不够,还需要一种overflow风格:

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

Answer 5

如果有人使用SASS/SCSS并且偶然发现这个问题 - 也许这个mixin可能会有所帮助:

@mixin line-clamp($numLines : 1, $lineHeight: 1.412) {
  overflow: hidden;
  text-overflow: -o-ellipsis-lastline;
  text-overflow: ellipsis;
  display: block;
  /* autoprefixer: off */
  display: -webkit-box;
  -webkit-line-clamp: $numLines;
  -webkit-box-orient: vertical;
  max-height: $numLines * $lineHeight + unquote('em');
}

这只会在webkit浏览器中添加省略号.休息只是切断它.

Answer 6

太遗憾了,你无法让它在两条线上工作!如果元素是显示块并且高度设置为2em或者其他东西会很棒,当文本溢出时它会显示省略号!

对于单个衬垫,您可以使用:

.show-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

对于多行,也许您可​​以使用Polyfill,例如jith autoellipsis,它位于github http://pvdspek.github.com/jquery.autoellipsis/

Answer 7

只需对支持它的浏览器（大多数现代浏览器）使用换行器，而对于较旧的浏览器则使用回退。

  .text {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;


    @supports (-webkit-line-clamp: 2) {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: initial;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
  }

Answer 8

我不是JS专业人士,但我想出了几个可以做到这一点的方法.

HTML:

<p id="truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi elementum consequat tortor et euismod. Nam commodo consequat libero vel lobortis. Morbi ac nisi at leo vehicula consectetur.</p>

然后使用jQuery将其截断为特定字符数,但保留最后一个单词:

// Truncate but leave last word
var myTag = $('#truncate').text();
if (myTag.length > 100) {
  var truncated = myTag.trim().substring(0, 100).split(" ").slice(0, -1).join(" ") + "…";
  $('#truncate').text(truncated);
}

结果如下:

Lorem ipsum dolor坐下来,精致的adipistur elit.Morbi
elementum consequat tortor等...

或者,您可以简单地将其截断为特定的字符数,如下所示:

// Truncate to specific character
var myTag = $('#truncate').text();
if (myTag.length > 15) {
  var truncated = myTag.trim().substring(0, 100) + "…";
  $('#truncate').text(truncated);
}

结果如下:

Lorem ipsum dolor坐下来,精致的adipistur elit.Morbi
elementum consequat tortor等euismod ...

希望有点帮助.

这是jsFiddle.

Answer 9

Sass 助手 mixin：

对于那些使用 Sass 等预处理器的人来说，您可以使用一个带有可选参数的 mixin，lines该参数默认为 1，这使得在元素上应用文本截断并在需要时更改行数变得非常方便：

@mixin text-ellipsis($lines: 1) {
    text-overflow: ellipsis;
    overflow: hidden;
    @if ($lines > 1) {
        display: -webkit-box;
        -webkit-line-clamp: $lines;
        -webkit-box-orient: vertical;
    } @else {
        white-space: nowrap;
    }
}

用法：

.some-title {
    @include text-ellipsis($lines: 2);
}

Answer 10

我将这些 css 属性用于行省略号 -

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

这 -webkit-line-clamp: 3; 是行数（3 行），之后 ... 显示。

Answer 11

我之前使用过jQuery-condense-plugin,看起来它可以做你想要的.如果没有,可以使用不同的插件来满足您的需求.

编辑:为你做了一个演示 - 注意我在演示中链接了jquery.condense.js,它具有魔力,所以完全归功于该插件的作者:)

Answer 12

这里是纯css的好例子.

.container{
  width: 200px;
}
.block-with-text {
  overflow: hidden;
  position: relative; 
  line-height: 1.2em;
  max-height: 3.6em;
  text-align: justify;  
  margin-right: -1em;
  padding-right: 1em;
}
.block-with-text+.block-with-text{
  margin-top:10px;
}
.block-with-text:before {
  content: '...';
  position: absolute;
  right: 0;
  bottom: 0;
}
.block-with-text:after {
  content: '';
  position: absolute;
  right: 0;
  width: 1em;
  height: 1em;
  margin-top: 0.2em;
  background: white;
}

<div class="container">


<div class="block-with-text">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a
</div>

<div class="block-with-text">
Lorem Ipsum is simply dummy text of the printing and typesetting industry
</div>


<div class="block-with-text">
Lorem Ipsum is simply
</div>

</div>

Answer 13

如果有人试图让 line-clamp 在 flexbox 中工作，那就有点棘手了——尤其是当你用很长的单词进行折磨测试时。此代码片段中唯一真正的区别在于min-width: 0;包含截断文本的 flex 项和word-wrap: break-word;. https://css-tricks.com/flexbox-truncated-text/ 的帽子提示以获取洞察力。免责声明：在撰写此答案时，Chrome 之外的浏览器支持很差。然而，从那时起，情况可能有所改善。

.flex-parent {
  display: flex;
}

.short-and-fixed {
  width: 30px;
  height: 30px;
  background: lightgreen;
}

.long-and-truncated {
  margin: 0 20px;
  flex: 1;
  min-width: 0;/* Important for long words! */
}

.long-and-truncated span {
  display: inline;
  -webkit-line-clamp: 3;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  word-wrap: break-word;/* Important for long words! */
}

<div class="flex-parent">
  <div class="flex-child short-and-fixed">
  </div>
  <div class="flex-child long-and-truncated">
    <span>asdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasd</span>
  </div>
  <div class="flex-child short-and-fixed">
  </div>
</div>

http://codepen.io/AlgeoMA/pen/JNvJdx（codepen版）

Answer 14

用省略号修剪多行文本的纯CSS方式

调整文本容器的高度，通过-webkit-line-clamp: 2控制线断；

.block-ellipsis {
  display: block;
  display: -webkit-box;
  max-width: 100%;
  height: 30px;
  margin: 0 auto;
  font-size: 14px;
  line-height: 1;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

Answer 15

这里所有的答案都是错误的，他们缺少重要的部分，高度

.container{
    width:200px;
    height:600px;
    background:red
}
.title {
        overflow: hidden;
        line-height: 20px;
        height: 40px;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
<div class="container">
    <div class="title">this is a long text you cant cut it in half</div>
</div>