第二行的css省略号

Posted 2023-03-04

【中文标题】第二行的css省略号

【英文标题】：css ellipsis on second line

【发布时间】：2011-07-13 06:52:24

【问题描述】：

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

【问题讨论】：

AFAIK 省略号将出现并截断元素宽度末尾的文本。它不会流到下一行。这里最好的解决方案是实现一些服务器端或客户端脚本，它会自动将文本修剪为一定数量的字符，然后附加省略号。我的猜测是客户端脚本会更好，它可以让您在需要时仍然拥有所有可用的原始文本。

这里有一个类似的问题：***.com/questions/3922739/…

tl;dr：只有在 webkit 中才有可能

我最接近实现这一点的方法是为省略号添加一个“后”伪元素，并将其内嵌定位，直接位于包含文本的元素之后。但是如果元素文本太长，省略号就会消失，因此您必须以某种方式修剪文本，以使其可靠。

【参考方案1】：

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

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

browser support

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>

【讨论】：

请注意，在此评论中，-webkit-line-clamp 不尊重可见性：隐藏。 bugs.webkit.org/show_bug.cgi?id=45399

嘿 - 看起来不错，但对我不起作用。它只是将 '...' 放在给定的 line-clamp 上，但不会剪切其余文本（即使使用空白 attr）

您可能需要添加 overflow: hidden 才能使用。

这在 Firefox 中不起作用，壁虎引擎不支持 webkit

这实际上现在在 Firefox 中有效。使用这个时甚至不需要指定text-overflow: ellipsis;。

【参考方案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，我们可以在纯 CSS 中使用 fragments（新）和 max-lines（新）来解决这个问题。还有更多关于http://css-tricks.com/line-clampin/的信息

EDIT 2 WebKit/Blink 有 line-clamp：-webkit-line-clamp: 2 会将省略号放在第二行。

【讨论】：

保持警惕，但到目前为止似乎众神还没有与我们同在：caniuse.com/#search=max-lines

如何使用 saas 实现上述功能？ @鲁迪

-webkit-line-clamp: 3

【参考方案3】：

对于支持它的浏览器（大多数现代浏览器）只需使用 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;
    
  

browser support

【讨论】：

空白：初始；救了我

这些答案的质量最好。谢谢

从我的角度来看，我认为这个解决方案是最优的。现在的网站都在使用大量的 JS，与 10 年前相比，我们必须迎合性能。我更喜欢使用 CSS 来设置样式，即使浏览器之间存在细微差别。

【参考方案4】：

我发现 Skeep 的回答还不够，还需要 overflow 样式：

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

【讨论】：

只是提到其他解决方案包括-webkit-line-clamp: 3;，而问题是2行，所以这个更正确。

【参考方案5】：

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

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

这是jsFiddle。

【讨论】：

这个插件还提供了许多其他实用程序，例如添加“阅读更多”链接，它还可以解析 URI 和 HTML 标记。很好的发现！

我为电子商务商店试用了 jQuery dotdotdot 1.7.3，将网格类别页面上的产品名称限制为两行。经过彻底的测试，我们决定不使用这个插件，因为有时，在 shift-refresh 之后，类别页面布局会被破坏。 YMMV。最后，我们采用了一个非常简单的 vanilla JS 解决方案：如果产品名称元素的 clientHeight 小于其 scrollHeight，则在预设边界处截断文本并附加“...”。有时因为预设的边界，一些产品名称可能有点太短，但它超级稳定。

Easty 易于实施且运行良好。谢谢！

虽然效果很好，但不幸的是它存在性能问题。如果您的项目需要使用多个省略号，请考虑另一种选择。另外这里引用存储库中的一句话：“因为它的性能无法提高，这个插件不再被积极维护。”。

另外，如果文本在加载后动态变化，它将不起作用:(

【参考方案6】：

如果有人在使用 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 浏览器中添加省略号。休息只是切断它。

【讨论】：

使用 LESS，我必须将 /* autoprefixer: off */ 更改为 /*! autoprefixer: off */ 否则 -webkit-box-orient: vertical; 在编译后被删除，这意味着省略号从未显示

使用 less 和 autoprefixer 作为 gulp 任务我必须在选项列表中设置 remove:false .. 谢谢@nathan

【参考方案7】：

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

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

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

【参考方案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 sit amet，consectetur adipiscing elit。莫比 elementum consequat tortor 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 sit amet，consectetur adipiscing elit。莫比 elementum consequat tortor et euismod…

希望能有所帮助。

这里是jsFiddle。

【参考方案9】：

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

对于单个衬里，您可以使用：

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

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

【讨论】：

那个插件对于它的功能来说太重了。它已经 5 岁了。而是使用另一篇文章中提到的dotdotdot。

【参考方案10】：

这是纯 CSS 中的 example。

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

【讨论】：

很好的解决方案，只是它会截断文本，即使第二行太短而无法截断，但仍然，竖起大拇指

【参考方案11】：

如果有人试图让 line-clamp 在 flexbox 中工作，那就有点棘手了——尤其是当你用很长的词进行折磨测试时。这段代码 sn-p 中唯一真正的区别是包含截断文本的弹性项目中的 min-width: 0; 和 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 版本）

【讨论】：

谢谢，。对我来说，这是最好的答案，。

【参考方案12】：

我之前用过jQuery-condense-plugin，看起来它可以为所欲为。如果没有，different plugins 可能会满足您的需求。

编辑：让你成为 demo - 请注意，我在演示中链接了 jquery.condense.js，它具有魔力，因此完全归功于该插件的作者 :)

【参考方案13】：

用省略号修剪多行文本的纯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;

【参考方案14】：

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

【参考方案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>

【参考方案16】：

之前遇到过这个问题，目前没有纯css解决方案

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

在http://www.samuelrossille.com/home/jstext.html 上阅读更多截图、教程和下载链接。

【参考方案17】：

Sass 辅助混合：

对于那些使用像 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);

【参考方案18】：

基于-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>

【参考方案19】：

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

$clamp(myHeader, clamp: 3);

【参考方案20】：

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

【讨论】：

请尝试在您的答案中包含示例代码

【参考方案21】：

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

我这样做的方式是：

假定一个粗略的字符长度（在本例中为 200）并传递给 与您的文字一起发挥作用 分割空格，得到一个长字符串 使用 jQuery 对字符后的第一个 " " 空格进行切片 长度 加入剩下的...

代码：

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

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