第二行 CSS 省略号

Question

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

示例：

我想要的是这样的：

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

但发生的事情是这样的：

I hope someone could help me. I ... 

Answer 1

Sass helper 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 2

我之前使用过 jQuery-condense-plugin ，看起来它可以做你想做的事情。如果没有，不同的插件可能会满足您的需求。

编辑：为您制作了一个演示 - 请注意，我链接了jquery.condense.js 在演示中它发挥了魔力，所以完全归功于该插件的作者:)

Answer 3

纯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 4

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

.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>

Answer 5

它是一个非标准的 CSS，当前版本的 CSS 中没有涵盖它（Firefox 不支持它）。尝试使用 JavaScript 代替。

Answer 6

我以前遇到过这个问题，并且没有纯 CSS 解决方案

，这就是为什么我开发了一个小型库来处理这个问题（以及其他问题）。该库提供了用于建模和执行字母级文本渲染的对象。例如，您可以模拟文本溢出：具有任意限制的省略号（不一定是一行）

阅读更多信息 http://www.samuelrossille.com/home/jstext.html 查看屏幕截图、教程和下载链接。

Answer 7

基于 -webkit-line-clamp 的纯 css 方法，适用于 webkit：

@-webkit-keyframes ellipsis {/*for test*/
    0% { width: 622px }
    50% { width: 311px }
    100% { width: 622px }
}
.ellipsis {
    max-height: 40px;/* h*n */
    overflow: hidden;
    background: #eee;

    -webkit-animation: ellipsis ease 5s infinite;/*for test*/
    /**
    overflow: visible;
    /**/
}
.ellipsis .content {
    position: relative;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-box-pack: center;
    font-size: 50px;/* w */
    line-height: 20px;/* line-height h */
    color: transparent;
    -webkit-line-clamp: 2;/* max row number n */
    vertical-align: top;
}
.ellipsis .text {
    display: inline;
    vertical-align: top;
    font-size: 14px;
    color: #000;
}
.ellipsis .overlay {
    position: absolute;
    top: 0;
    left: 50%;
    width: 100%;
    height: 100%;
    overflow: hidden;

    /**
    overflow: visible;
    left: 0;
    background: rgba(0,0,0,.5);
    /**/
}
.ellipsis .overlay:before {
    content: "";
    display: block;
    float: left;
    width: 50%;
    height: 100%;

    /**
    background: lightgreen;
    /**/
}
.ellipsis .placeholder {
    float: left;
    width: 50%;
    height: 40px;/* h*n */

    /**
    background: lightblue;
    /**/
}
.ellipsis .more {
    position: relative;
    top: -20px;/* -h */
    left: -50px;/* -w */
    float: left;
    color: #000;
    width: 50px;/* width of the .more w */
    height: 20px;/* h */
    font-size: 14px;

    /**
    top: 0;
    left: 0;
    background: orange;
    /**/
}

<div class='ellipsis'>
    <div class='content'>
        <div class='text'>text text text text text text text text text text text text text text text text text text text text text </div>
        <div class='overlay'>
            <div class='placeholder'></div>
            <div class='more'>...more</div>
        </div>
    </div>
</div>

Answer 8

没有真正简单的方法可以做到这一点。使用 Clamp.js 库。

$clamp(myHeader, {clamp: 3});

Answer 9

试试这个
点击网址-------->
[1]: https://i.sstatic.net/QMFQFPnZ.png

Answer 10

延迟回复，但 html 换行符也可以，因此您可以执行仅 html + css 的解决方案。因此，通常使用 br 元素是不好的做法，但如果您用 br 来中断注释，文本溢出省略号将从 h​​tml 文本的下一行开始。

Answer 11

我找到了一个解决方案，但是您需要知道适合您的文本区域的粗略字符长度，然后将 ... 加入到前面的空格中。

我这样做的方法是：

1. 假设一个粗略的字符长度（在本例中为 200）并传递给
   函数与文本一起
2. 分割空格，这样你就有一个长字符串，
3. 使用 jQuery 来切片字符后的第一个“”空格
   长度
4. 加入剩余的...

代码：

truncate = function(description){
        return description.split('').slice(0, description.lastIndexOf(" ",200)).join('') + "...";           
}

这是一个小提琴 - http://jsfiddle.net/GYsW6/1/

Answer 12

这应该可以在 webkit 浏览器中工作：

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

浏览器支持

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

* { font-family: verdana; }

<div>
   The <b><a target='_blank' href='https://developer.mozilla.org/docs/Web/CSS/-webkit-line-clamp'>-webkit-line-clamp</a></b> CSS property allows limiting of the contents of a block container to the specified number of lines. It only works in combination with the display  property set to <b>-webkit-box</b> or <b>-webkit-inline-box</b> and the <b>-webkit-box-orient</b> property set to vertical. In most cases you will also want to set overflow to hidden, otherwise the contents won't be clipped but an ellipsis will still be shown after the specified number of lines. When applied to anchor elements, the truncating can happen in the middle of the text, not necessarily at the end.
</div>

Answer 13

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（新）。还有一些关于 http://css-tricks.com/line-clampin/

< strong>编辑2 WebKit/Blink有line-clamp: -webkit-line-clamp: 2 会将省略号放在第二行。

Answer 14

只需对支持它的浏览器（大多数现代浏览器）使用 line-clamp 并在较旧的浏览器中回退到 1 行。

  .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 15

我发现 Skeep 的答案还不够，还需要一个 overflow 风格：

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

Answer 16

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

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

这是一个 jsFiddle。

Answer 17

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

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

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

Answer 18

如果有人试图让 line-clamp 在 Flexbox 中工作，那就有点棘手了 - 特别是当你用很长的单词进行折磨测试时。此代码片段中唯一真正的区别是包含截断文本的 Flex 项目中的 min-width: 0; 和 word-wrap: break-word;。向 https://css-tricks.com/flexbox-truncated-text/< 致敬/a> 以获得洞察力。免责声明：在撰写此答案时，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 19

如果有人正在使用 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 20

我不是 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 sat amet，consectetur adipiscing elit。莫尔比
elementum consequat totortor et...

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

// 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 sat amet，consectetur adipiscing elit。莫尔比
elementum consequat tortor et euismod...

希望能有所帮助。

这是 jsFiddle。

Answer 21

多么遗憾你不能让它在两条线上工作！如果元素是显示块并且高度设置为 2em 或其他值，并且当文本溢出时会显示省略号，那就太棒了！

对于单行，您可以使用：

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

对于多行，您可以使用 Polyfill，例如 github 上的 jQuery autoellipsis http:// pvdspek.github.com/jquery.autoellipsis/

Answer 22

这是一个很好的纯示例 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>