Html 将省略号应用于多行文本

Applying an ellipsis to multiline text

提问by Bruno Landowski

Is there a solution to add ellipsis on last line inside a div with a fluid height (20%)?

是否有解决方案可以在具有流体高度 (20%) 的 div 内的最后一行添加省略号？

I found the -webkit-line-clampfunction in CSS, but in my case the line number will be depending on window size.

我-webkit-line-clamp在 CSS 中找到了该函数，但在我的情况下，行号将取决于窗口大小。

p {
    width:100%;
    height:20%;
    background:red;
    position:absolute;
}

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed dui felis. Vivamus vitae pharetra nisl, eget fringilla elit. Ut nec est sapien. Aliquam dignissim velit sed nunc imperdiet cursus. Proin arcu diam, tempus ac vehicula a, dictum quis nibh. Maecenas vitae quam ac mi venenatis vulputate. Suspendisse fermentum suscipit eros, ac ultricies leo sagittis quis. Nunc sollicitudin lorem eget eros eleifend facilisis. Quisque bibendum sem at bibendum suscipit. Nam id tellus mi. Mauris vestibulum, eros ac ultrices lacinia, justo est faucibus ipsum, sed sollicitudin sapien odio sed est. In massa ipsum, bibendum quis lorem et, volutpat ultricies nisi. Maecenas scelerisque sodales ipsum a hendreritLorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed dui felis. Vivamus vitae pharetra nisl, eget fringilla elit. Ut nec est sapien. Aliquam dignissim velit sed nunc imperdiet cursus. Proin arcu diam, tempus ac vehicula a, dictum quis nibh. Maecenas vitae quam ac mi venenatis vulputate. Suspendisse fermentum suscipit eros, ac ultricies leo sagittis quis. Nunc sollicitudin lorem eget eros eleifend facilisis. Quisque bibendum sem at bibendum suscipit. Nam id tellus mi. Mauris vestibulum, eros ac ultrices lacinia, justo est faucibus ipsum, sed sollicitudin sapien odio sed est. In massa ipsum, bibendum quis lorem et, volutpat ultricies nisi. Maecenas scelerisque sodales ipsum a hendrerit.</p>

I have this JSFiddle to illustrate the issue. https://jsfiddle.net/96knodm6/

我有这个 JSFiddle 来说明这个问题。 https://jsfiddle.net/96knodm6/

采纳答案by Bruno Landowski

I finally found a solution to do what I want. As pa paragraphe and articlethe wrapper. If you want to apply ellipsis to pdepending on articleheight (which also depends on window height), you need to get the heightof the article, the line-heightof the pand then articleHeight/lineHeightto find the number of line-clampthat can be added dynamically then.

我终于找到了一个解决方案来做我想做的事。作为p段落和article包装。如果你想申请省略号p视article高（这也依赖于窗口的高度），你需要得到height的article，该line-height的p，然后articleHeight/lineHeight找到的数量line-clamp可以动态地补充说，然后。

The only thing is the line-heightshould be declared in the css file.

唯一的事情是line-height应该在css文件中声明。

Check the following code. If you change the height of the window, the line-clampwill change. Can be great to create a plug-in aiming to do that.

检查以下代码。如果您更改窗口的高度，line-clamp将更改。创建一个旨在做到这一点的插件会很棒。

jsfiddle

提琴手

function lineclamp() {
  var lineheight = parseFloat($('p').css('line-height'));
  var articleheight = $('article').height(); 
  var calc = parseInt(articleheight/lineheight);
  $("p").css({"-webkit-line-clamp": "" + calc + ""});
}


$(document).ready(function() {
    lineclamp();
});

$( window ).resize(function() {
  lineclamp();
});

article {
  height:60%;
  background:red;
  position:absolute;
}

p {
  margin:0;
  line-height:120%;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<article>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque lorem ligula, lacinia a justo sed, porttitor vulputate risus. In non feugiat risus. Sed vitae urna nisl. Duis suscipit volutpat sollicitudin. Donec ac massa elementum massa condimentum mollis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla sollicitudin sapien at enim sodales dapibus. Pellentesque sed nisl eu sem aliquam tempus nec ut leo. Quisque rutrum nulla nec aliquam placerat. Fusce a massa ut sem egestas imperdiet. Sed sollicitudin id dolor egestas malesuada. Quisque placerat lobortis ante, id ultrices ipsum hendrerit nec. Quisque quis ultrices erat.Nulla gravida ipsum nec sapien pellentesque pharetra. Suspendisse egestas aliquam nunc vel egestas. Nullam scelerisque purus interdum lectus consectetur mattis. Aliquam nunc erat, accumsan ut posuere eu, vehicula consequat ipsum. Fusce vel ex quis sem tristique imperdiet vel in mi. Cras leo orci, fermentum vitae volutpat vitae, convallis semper libero. Phasellus a volutpat diam. Ut pulvinar purus felis, eu vehicula enim aliquet vitae. Suspendisse quis lorem facilisis ante interdum euismod et vitae risus. Vestibulum varius nulla et enim malesuada fringilla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque lorem ligula, lacinia a justo sed, porttitor vulputate risus. In non feugiat risus. Sed vitae urna nisl. Duis suscipit volutpat sollicitudin. Donec ac massa elementum massa condimentum mollis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla sollicitudin sapien at enim sodales dapibus. Pellentesque sed nisl eu sem aliquam tempus nec ut leo. Quisque rutrum nulla nec aliquam placerat. Fusce a massa ut sem egestas imperdiet. Sed sollicitudin id dolor egestas malesuada. Quisque placerat lobortis ante, id ultrices ipsum hendrerit nec.</p></article>

回答by Michael Benjamin

If you want to apply ellipsis (...) to a single line of text, CSS makes that somewhat easy with the text-overflowproperty. It's still a bit tricky (due to all the requirements – see below), but text-overflowmakes it possible and reliable.

如果您想将省略号 (...) 应用于单行 text，CSS 可以通过该text-overflow属性简化此操作。它仍然有点棘手（由于所有要求 - 见下文），但text-overflow使其成为可能且可靠。

If, however, you want to use ellipsis on multiline text– as would be the case here – then don't expect to have any fun. CSS has no standard method for doing this, and the workarounds are hit and miss.

但是，如果您想在多行文本上使用省略号——就像这里的情况一样——那么不要指望有任何乐趣。CSS 没有执行此操作的标准方法，并且变通方法是偶然的。

Ellipsis for Single Line Text

单行文本的省略号

With text-overflow, ellipsis can be applied to a single line of text. The following CSS requirements must be met:

使用text-overflow，省略号可以应用于单行文本。必须满足以下 CSS 要求：

• must have a width, max-widthor flex-basis
• must have white-space: nowrap
• must have overflowwith value other than visible
• must be display: blockor inline-block(or the functional equivalent, such as a flex item).

• 必须有一个width,max-width或flex-basis
• 一定有 white-space: nowrap
• 必须具有overflow除visible
• 必须是display: block或inline-block（或等效的功能，例如弹性项目）。

So this will work:

所以这将起作用：

p {
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  display: inline-block;
  text-overflow: ellipsis;
  border: 1px solid #ddd;
  margin: 0;
}

<p>
  This is a test of CSS <i>text-overflow: ellipsis</i>. 
  This is a test of CSS <i>text-overflow: ellipsis</i>. 
  This is a test of CSS <i>text-overflow: ellipsis</i>. 
  This is a test of CSS <i>text-overflow: ellipsis</i>.
  This is a test of CSS <i>text-overflow: ellipsis</i>.
  This is a test of CSS <i>text-overflow: ellipsis</i>.
</p>

jsFiddle version

jsFiddle 版本

BUT, try removing the width, or letting the overflowdefault to visible, or removing white-space: nowrap, or using something other than a block container element, AND, ellipsis fails miserably.

但是，尝试删除width，或者让overflow默认为visible，或者删除white-space: nowrap，或者使用块容器元素以外的其他东西，并且，省略号失败了。

One big takeaway here: text-overflow: ellipsishas no effect on multiline text. (The white-space: nowraprequirement alone eliminates that possibility.)

这里的一大收获：text-overflow: ellipsis对多行文本没有影响。（white-space: nowrap仅此要求就消除了这种可能性。）

p {
    width: 200px;
    /* white-space: nowrap; */
    height: 90px; /* new */
    overflow: hidden;
    display: inline-block;
    text-overflow: ellipsis;
    border: 1px solid #ddd;
    margin: 0;
}

<p>
  This is a test of CSS <i>text-overflow: ellipsis</i>. 
  This is a test of CSS <i>text-overflow: ellipsis</i>. 
  This is a test of CSS <i>text-overflow: ellipsis</i>. 
  This is a test of CSS <i>text-overflow: ellipsis</i>.
  This is a test of CSS <i>text-overflow: ellipsis</i>.
  This is a test of CSS <i>text-overflow: ellipsis</i>.
</p>

jsFiddle version

jsFiddle 版本

---

---

Ellipsis for Multiline Text

多行文本的省略号

Because CSS has no property for ellipsis on multiline text, various workarounds have been created. Several of these methods can be found here:

因为 CSS 在多行文本上没有省略号的属性，所以已经创建了各种解决方法。可以在此处找到其中几种方法：

• jQuery dotdotdot...
• Line Clampin' (Truncating Multiple Line Text)
• CSS Ellipsis: How to Manage Multi-Line Ellipsis in Pure CSS
• A pure CSS solution for multiline text truncation

• jQuery 点点...
• Line Clampin'（截断多行文本）
• CSS 省略号：如何在纯 CSS 中管理多行省略号
• 用于多行文本截断的纯 CSS 解决方案

The Mobify link above was removed and now references an archive.org copy, but appears to be implemented in this codepen.

上面的 Mobify 链接已删除，现在引用了 archive.org 副本，但似乎已在此 codepen 中实现。

回答by Jobincs

Just increase the -webkit-line-clamp: 4;to increase the number of lines

只需增加-webkit-line-clamp: 4; 增加行数

p {
    display: block;
    display: -webkit-box;
    max-width: 200px;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

<p>Lorem ipsum dolor sit amet, novum menandri adversarium ad vim, ad his persius nostrud conclusionemque. Ne qui atomorum pericula honestatis. Te usu quaeque detracto, idque nulla pro ne, ponderum invidunt eu duo. Vel velit tincidunt in, nulla bonorum id eam, vix ad fastidii consequat definitionem.</p>

---

---

Edit 02/05/2018

编辑 02/05/2018

Line clamp is a proprietary and undocumented CSS (webkit) : https://caniuse.com/#feat=css-line-clamp, so it currently work on only few browsers.

线夹是一种专有且未公开的 CSS (webkit) ：https: //caniuse.com/#feat=css-line-clamp，因此它目前仅适用于少数浏览器。

回答by Sawan mishra

Please check this css for ellipsis to multi-line text

请检查此 css 以将省略号转为多行文本

body {
  margin: 0;
  padding: 50px;
}

/* mixin for multiline */
.block-with-text {
  overflow: hidden;
  position: relative;
  line-height: 1.2em;
  max-height: 6em;
  text-align: justify;
  margin-right: -1em;
  padding-right: 1em;
}
.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;
}

<p class="block-with-text">The Hitch Hiker's Guide to the Galaxy has a few things to say on the subject of towels. A towel, it says, is about the most massivelyuseful thing an interstellar hitch hiker can have. Partly it has great practical value - you can wrap it around you for warmth as you bound across the cold moons of  Jaglan Beta; you can lie on it on the brilliant marble-sanded beaches of Santraginus V, inhaling the heady sea vapours; you can sleep under it beneath the stars which shine so redly on the desert world of Kakrafoon;  use it to sail a mini raft down the slow heavy river Moth; wet it for use in hand-to-hand-combat; wrap it round your head to ward off noxious fumes or to avoid the gaze of the Ravenous Bugblatter Beast of Traal (a mindboggingly stupid animal, it assumes that if you can't see it, it can't see you - daft as a bush, but very ravenous); you can wave your towel in emergencies as a distress signal, and of course dry yourself off with it if it still seems to be clean enough. More importantly, a towel has immense psychological value. For some reason, if a strag (strag: non-hitch hiker) discovers that a hitch hiker has his towel with him, he will automatically assume that he is also in possession of a toothbrush, face flannel, soap, tin of biscuits, flask, compass, map, ball of string, gnat spray, wet weather gear, space suit etc., etc. Furthermore, the strag will then happily lend the hitch hiker any of these or a dozen other items that the hitch hiker might accidentally have "lost". What the strag will think is that any man who can hitch the length and breadth of the galaxy, rough it, slum it, struggle against terrible odds, win through, and still knows where his towel is is clearly a man to be reckoned with.</p>

回答by satish mallick

p {
    width:100%;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    background:#fff;
    position:absolute;
}

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed dui felis. Vivamus vitae pharetra nisl, eget fringilla elit. Ut nec est sapien. Aliquam dignissim velit sed nunc imperdiet cursus. Proin arcu diam, tempus ac vehicula a, dictum quis nibh. Maecenas vitae quam ac mi venenatis vulputate. Suspendisse fermentum suscipit eros, ac ultricies leo sagittis quis. Nunc sollicitudin lorem eget eros eleifend facilisis. Quisque bibendum sem at bibendum suscipit. Nam id tellus mi. Mauris vestibulum, eros ac ultrices lacinia, justo est faucibus ipsum, sed sollicitudin sapien odio sed est. In massa ipsum, bibendum quis lorem et, volutpat ultricies nisi. Maecenas scelerisque sodales ipsum a hendreritLorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed dui felis. Vivamus vitae pharetra nisl, eget fringilla elit. Ut nec est sapien. Aliquam dignissim velit sed nunc imperdiet cursus. Proin arcu diam, tempus ac vehicula a, dictum quis nibh. Maecenas vitae quam ac mi venenatis vulputate. Suspendisse fermentum suscipit eros, ac ultricies leo sagittis quis. Nunc sollicitudin lorem eget eros eleifend facilisis. Quisque bibendum sem at bibendum suscipit. Nam id tellus mi. Mauris vestibulum, eros ac ultrices lacinia, justo est faucibus ipsum, sed sollicitudin sapien odio sed est. In massa ipsum, bibendum quis lorem et, volutpat ultricies nisi. Maecenas scelerisque sodales ipsum a hendrerit.</p>

回答by Lukasz Kurzynski

This manhave the best solution. Only css:

这个人有最好的解决办法。只有CSS：

.multiline-ellipsis {
    display: block;
    display: -webkit-box;
    max-width: 400px;
    height: 109.2px;
    margin: 0 auto;
    font-size: 26px;
    line-height: 1.4;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

回答by Eddybrando Vásquez

I took a look at how YouTube solves it on their homepage and simplified it:

我在他们的主页上查看了 YouTube 如何解决它并对其进行了简化：

.multine-ellipsis {
  -webkit-box-orient: vertical;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
}

This will allow 2 lines of code and then append an ellipsis.

这将允许 2 行代码，然后附加一个省略号。

Gist: https://gist.github.com/eddybrando/386d3350c0b794ea87a2082bf4ab014b

要点：https: //gist.github.com/eddybrando/386d3350c0b794ea87a2082bf4ab014b

回答by puopg

I have just been playing around a little bit with this concept. Basically, if you are ok with potentially having a pixel or so cut off from your last character, here is a pure css and html solution:

我只是在玩这个概念。基本上，如果您可以从最后一个字符中删除一个像素左右，这里是一个纯 css 和 html 解决方案：

The way this works is by absolutely positioning a div below the viewable region of a viewport. We want the div to offset up into the visible region as our content grows. If the content grows too much, our div will offset too high, so upper bound the height our content can grow.

其工作方式是将 div 绝对定位在视口的可视区域下方。随着内容的增长，我们希望 div 向上偏移到可见区域。如果内容增长太多，我们的 div 会偏移得太高，所以我们的内容可以增长的高度上限。

HTML:

HTML：

<div class="text-container">
  <span class="text-content">
    PUT YOUR TEXT HERE
    <div class="ellipsis">...</div> // You could even make this a pseudo-element
  </span>
</div>

CSS:

CSS：

.text-container {
    position: relative;
    display: block;
    color: #838485;
    width: 24em;
    height: calc(2em + 5px); // This is the max height you want to show of the text. A little extra space is for characters that extend below the line like 'j'
    overflow: hidden;
    white-space: normal;
}

.text-content {
  word-break: break-all;
  position: relative;
  display: block;
  max-height: 3em;       // This prevents the ellipsis element from being offset too much. It should be 1 line height greater than the viewport 
}

.ellipsis {
  position: absolute;
  right: 0;
  top: calc(4em + 2px - 100%); // Offset grows inversely with content height. Initially extends below the viewport, as content grows it offsets up, and reaches a maximum due to max-height of the content
  text-align: left;
  background: white;
}

I have tested this in Chrome, FF, Safari, and IE 11.

我已经在 Chrome、FF、Safari 和 IE 11 中对此进行了测试。

You can check it out here: http://codepen.io/puopg/pen/vKWJwK

你可以在这里查看：http: //codepen.io/puopg/pen/vKWJwK

You might even be able to alleviate the abrupt cut off of the character with some CSS magic.

您甚至可以使用一些 CSS 魔法来缓解角色的突然中断。

EDIT: I guess one thing that this imposes is word-break: break-all since otherwise the content would not extend to the very end of the viewport. :(

编辑：我想这强加的一件事是断字：打破所有，否则内容不会延伸到视口的最后。:(

回答by c-smile

Unfortunately no with current state of affairs in CSS.

不幸的是，CSS 中的当前状态没有。

Ellipsis rendering has prerequisite white-space:nowrapthat effectively means: ellipsis are drawn on single line text containers only.

省略号渲染的前提white-space:nowrap是有效地表示：省略号仅在单行文本容器上绘制。

回答by Anton R

user this formula:

用户这个公式：

overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; //put number of line here