blocks|key|967725|text|看过W3+spec+for+text-overflow之后，我认为只使用CSS是不可能的。省略是一种新特性，所以到目前为止，它可能还没有得到太多的用法或反馈。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|967726|然而，this+guy似乎问了一个类似(或相同)的问题，并且有人能够提出一个很好的jQuery解决方案。您可以在此处演示该解决方案：http://jsfiddle.net/MPkSF/|967727|如果javascript不是一个选择，我想你可能不走运……|967728|entityMap|0|LINK|mutability|MUTABLE|url|http://www.w3.org/TR/2002/WD-css3-text-20021024/#text-overflow-ellipsis|1|https://stackoverflow.com/q/3404508/353278|2|http://jsfiddle.net/MPkSF/^0|2|P|0|0|3|8|1|1U|Q|2|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@$A|U|B|V|1|W]]|C|$]]|$1|D|3|E|5|6|7|X|8|@]|9|@$A|Y|B|Z|1|10]|$A|11|B|12|1|13]]|C|$]]|$1|F|3|G|5|6|7|14|8|@]|9|@]|C|$]]|$1|H|3|-4|5|6|7|15|8|@]|9|@]|C|$]]]|I|$J|$5|K|L|M|C|$N|O]]|P|$5|K|L|M|C|$N|Q]]|R|$5|K|L|M|C|$N|S]]]]

<p>After looking over the <a href="http://www.w3.org/TR/2002/WD-css3-text-20021024/#text-overflow-ellipsis" rel="nofollow noreferrer">W3 spec for text-overflow</a>, I don't think this is possible using only CSS.  Ellipsis is a new-ish property, so it probably hasn't received much usage or feedback as of yet.</p>

<p>However, <a href="https://stackoverflow.com/q/3404508/353278">this guy</a> appears to have asked a similar (or identical) question, and someone was able to come up with a nice jQuery solution.  You can demo the solution here: <a href="http://jsfiddle.net/MPkSF/" rel="nofollow noreferrer">http://jsfiddle.net/MPkSF/</a></p>

<p>If javascript is not an option, I think you may be out of luck...</p>


blocks|key|967795|text|也有几个jquery插件可以解决这个问题，但很多都不能处理多行文本。以下工作：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|967796|967797|http://pvdspek.github.com/jquery.autoellipsis/|unordered-list-item|offset|length|967798|http://dotdotdot.frebsite.nl/|967799|http://keith-wood.name/more.html|967800|http://github.com/tbasse/jquery-truncate|967801|967802|还有一些preformance+tests。|967803|entityMap|0|LINK|mutability|MUTABLE|url|1|2|3|4|http://jsperf.com/truncate-vs-dotdotdot/5^0|0|0|0|1A|0|0|0|T|1|0|0|W|2|0|0|14|3|0|0|4|H|4|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|13|8|@]|9|@]|A|$]]|$1|C|3|D|5|E|7|14|8|@]|9|@$F|15|G|16|1|17]]|A|$]]|$1|H|3|I|5|E|7|18|8|@]|9|@$F|19|G|1A|1|1B]]|A|$]]|$1|J|3|K|5|E|7|1C|8|@]|9|@$F|1D|G|1E|1|1F]]|A|$]]|$1|L|3|M|5|E|7|1G|8|@]|9|@$F|1H|G|1I|1|1J]]|A|$]]|$1|N|3|-4|5|6|7|1K|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|1L|8|@]|9|@$F|1M|G|1N|1|1O]]|A|$]]|$1|Q|3|-4|5|6|7|1P|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|D]]|X|$5|T|U|V|A|$W|I]]|Y|$5|T|U|V|A|$W|K]]|Z|$5|T|U|V|A|$W|M]]|10|$5|T|U|V|A|$W|11]]]]

<p>There are also several jquery plugins that deal with this issue, but many do not handle multiple lines of text.  Following works:</p>

<ul>
<li><a href="http://pvdspek.github.com/jquery.autoellipsis/" rel="noreferrer">http://pvdspek.github.com/jquery.autoellipsis/</a></li>
<li><a href="http://dotdotdot.frebsite.nl/" rel="noreferrer">http://dotdotdot.frebsite.nl/</a></li>
<li><a href="http://keith-wood.name/more.html" rel="noreferrer">http://keith-wood.name/more.html</a></li>
<li><a href="http://github.com/tbasse/jquery-truncate" rel="noreferrer">http://github.com/tbasse/jquery-truncate</a></li>
</ul>

<p>There also some <a href="http://jsperf.com/truncate-vs-dotdotdot/5" rel="noreferrer">preformance tests</a>.</p>


blocks|key|2869686|text|问得好..。我希望有一个答案，但这是你现在能得到的最接近CSS的答案。没有省略号，但仍然非常有用。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2869687|overflow:+hidden;
line-height:+1.2em;
height:+3.6em;++++++//+3+lines+*+line-height|code-block|syntax|javascript|2869688|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Great question... I wish there was an answer, but this is the closest you can get with CSS these days. No ellipsis, but still pretty usable.</p>

<pre><code>overflow: hidden;
line-height: 1.2em;
height: 3.6em;      // 3 lines * line-height
</code></pre>


blocks|key|4659226|text|我一直在苦苦思索，直到我成功地实现了这一点。它有几个警告：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4659227|它不是纯；你必须添加一些|4659228|元素。但是不需要JavaScript。|ordered-list-item|4659229|省略号在最后一行右对齐。这意味着如果您的文本没有右对齐或对齐，最后一个可见字和省略号之间可能会有一个明显的间隙(取决于第一个隐藏字的长度)。|4659230|省略号的空间总是保留的。这意味着如果文本几乎精确地放入框中，它可能会被不必要地截断(最后一个单词被隐藏，尽管从技术上讲它不需要)。|4659231|文本需要有固定的背景色，因为我们使用彩色矩形来隐藏省略号，以防不需要省略号。|4659232|4659233|我还应该注意，文本将在单词边界处断开，而不是在字符边界处断开。这是经过深思熟虑的(因为我认为这对较长的文本更好)，但因为它与text-overflow:+ellipsis所做的不同，所以我想我应该提到它。|offset|length|style|CODE|4659234|如果你能接受这些警告，HTML看起来是这样的：|4659235|<div+class="ellipsify">
++++<div+class="pre-dots"></div>
++++<div+class="dots">&hellip;</div>
++++
++++<span+class="hidedots1"></span>
++++<div+class="hidedots2"></div>
</div>|code-block|syntax|javascript|4659236|这是相应的CSS，使用150像素宽的方框为例，在白色背景上有三行文本。它假设您有一个CSS重置或类似的设置，在必要时将页边距和填充设置为零。|4659237|/*+the+wrapper+*/
.ellipsify+{
++++font-size:12px;
++++line-height:18px;
++++height:+54px;+++++++/*+3x+line+height+*/
++++width:+150px;
++++overflow:+hidden;
++++position:+relative;+/*+so+we're+a+positioning+parent+for+the+dot+hiders+*/
++++background:+white;
}

/*+Used+to+push+down+.dots.+Can't+use+absolute+positioning,+since+that
+++would+stop+the+floating.+Can't+use+relative+positioning,+since+that
+++would+cause+floating+in+the+wrong+(namely:+original)+place.+Can't+
+++change+height+of+#dots,+since+it+would+have+the+full+width,+and
+++thus+cause+early+wrapping+on+all+lines.+*/
.pre-dots+{
++++float:+right;
++++height:+36px;++/*+2x+line+height+(one+less+than+visible+lines)+*/
}

.dots+{
++++float:+right;+/*+to+make+the+text+wrap+around+the+dots+*/
++++clear:+right;+/*+to+push+us+below+(not+next+to)+.pre-dots+*/
}

/*+hides+the+dots+if+the+text+has+*exactly*+3+lines+*/
.hidedots1+{
++++background:+white;
++++width:+150px;
++++height:+18px;+++++++/*+line+height+*/
++++position:+absolute;+/*+otherwise,+because+of+the+width,+it'll+be+wrapped+*/
}

/*+hides+the+dots+if+the+text+has+*less+than*+3+lines+*/
.hidedots2+{
++++background:+white;+
++++width:+150px;
++++height:+54px;+++++++/*+3x+line+height,+to+ensure+hiding+even+if+empty+*/
++++position:+absolute;+/*+ensures+we're+above+the+dots+*/
}|4659238|结果如下所示：|4659239|​|4659240|📷|atomic|4659241|4659242|为了阐明它是如何工作的，这里是相同的图像，除了.hidedots1以红色突出显示，而.hidedots2以青色突出显示。以下是在没有不可见文本时隐藏省略号的矩形：|4659243|4659244|4659245|4659246|在IE9、IE8+(仿真)、Chrome、火狐、Safari和Opera上进行了测试。在IE7中不起作用。|4659247|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/036d0cc4aa0d4a133ebcc39891262d6f.png|imageAlt|1|https://ask.qcloudimg.com/http-save/yehe-900000/78026f99fa7255a85c8aeb90be2ad770.png^0|0|0|0|0|0|0|0|1Q|N|0|0|0|0|0|0|0|0|1|0|0|0|N|A|16|A|0|0|0|1|1|0|0|0^^$0|@$1|2|3|4|5|6|7|1U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1V|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|1W|8|@]|9|@]|A|$]]|$1|G|3|H|5|F|7|1X|8|@]|9|@]|A|$]]|$1|I|3|J|5|F|7|1Y|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|1Z|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|20|8|@]|9|@]|A|$]]|$1|N|3|O|5|6|7|21|8|@$P|22|Q|23|R|S]]|9|@]|A|$]]|$1|T|3|U|5|6|7|24|8|@]|9|@]|A|$]]|$1|V|3|W|5|X|7|25|8|@]|9|@]|A|$Y|Z]]|$1|10|3|11|5|6|7|26|8|@]|9|@]|A|$]]|$1|12|3|13|5|X|7|27|8|@]|9|@]|A|$Y|Z]]|$1|14|3|15|5|6|7|28|8|@]|9|@]|A|$]]|$1|16|3|17|5|6|7|29|8|@]|9|@]|A|$]]|$1|18|3|19|5|1A|7|2A|8|@]|9|@$P|2B|Q|2C|1|2D]]|A|$]]|$1|1B|3|17|5|6|7|2E|8|@]|9|@]|A|$]]|$1|1C|3|1D|5|6|7|2F|8|@$P|2G|Q|2H|R|S]|$P|2I|Q|2J|R|S]]|9|@]|A|$]]|$1|1E|3|17|5|6|7|2K|8|@]|9|@]|A|$]]|$1|1F|3|19|5|1A|7|2L|8|@]|9|@$P|2M|Q|2N|1|2O]]|A|$]]|$1|1G|3|17|5|6|7|2P|8|@]|9|@]|A|$]]|$1|1H|3|1I|5|6|7|2Q|8|@]|9|@]|A|$]]|$1|1J|3|-4|5|6|7|2R|8|@]|9|@]|A|$]]]|1K|$1L|$5|1M|1N|1O|A|$1P|1Q|1R|-4]]|1S|$5|1M|1N|1O|A|$1P|1T|1R|-4]]]]

<p>I have hacked around until I've managed to achieve something close to this. It comes with a few caveats:</p>

<ol>
<li>It's not pure CSS; you have to add a few HTML elements. There's however no JavaScript required.</li>
<li>The ellipsis is right-aligned on the last line. This means that if your text isn't right-aligned or justified, there may be a noticable gap between the last visible word and the ellipsis (depending on the length of the first hidden word).</li>
<li>The space for the ellipsis is always reserved. This means that if the text fits in the box almost precisely, it may be unnecessarily truncated (the last word is hidden, although it technically wouldn't have to).</li>
<li>Your text needs to have a fixed background color, since we're using colored rectangles to hide the ellipsis in cases where it's not needed.</li>
</ol>

<p>I should also note that the text will be broken at a word boundary, not a character boundary. This was deliberate (since I consider that better for longer texts), but because it's different from what <code>text-overflow: ellipsis</code> does, I thought I should mention it.</p>

<p>If you can live with these caveats, the HTML looks like this:</p>

<pre class="lang-html prettyprint-override"><code>&lt;div class="ellipsify"&gt;
    &lt;div class="pre-dots"&gt;&lt;/div&gt;
    &lt;div class="dots"&gt;&amp;hellip;&lt;/div&gt;
    &lt;!-- your text here --&gt;
    &lt;span class="hidedots1"&gt;&lt;/span&gt;
    &lt;div class="hidedots2"&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>And this is the corresponding CSS, using the example of a 150 pixel wide box with three lines of text on a white background. It assumes you have a CSS reset or similar that sets margins and paddings to zero where necessary.</p>

<pre class="lang-css prettyprint-override"><code>/* the wrapper */
.ellipsify {
    font-size:12px;
    line-height:18px;
    height: 54px;       /* 3x line height */
    width: 150px;
    overflow: hidden;
    position: relative; /* so we're a positioning parent for the dot hiders */
    background: white;
}

/* Used to push down .dots. Can't use absolute positioning, since that
   would stop the floating. Can't use relative positioning, since that
   would cause floating in the wrong (namely: original) place. Can't 
   change height of #dots, since it would have the full width, and
   thus cause early wrapping on all lines. */
.pre-dots {
    float: right;
    height: 36px;  /* 2x line height (one less than visible lines) */
}

.dots {
    float: right; /* to make the text wrap around the dots */
    clear: right; /* to push us below (not next to) .pre-dots */
}

/* hides the dots if the text has *exactly* 3 lines */
.hidedots1 {
    background: white;
    width: 150px;
    height: 18px;       /* line height */
    position: absolute; /* otherwise, because of the width, it'll be wrapped */
}

/* hides the dots if the text has *less than* 3 lines */
.hidedots2 {
    background: white; 
    width: 150px;
    height: 54px;       /* 3x line height, to ensure hiding even if empty */
    position: absolute; /* ensures we're above the dots */
}
</code></pre>

<p>The result looks like this:</p>

<p><img src="https://i.stack.imgur.com/K97Ay.png" alt="image of the rendered result with different text lengths"></p>

<p>To clarify how it works, here's the same image, except that <code>.hidedots1</code> is hightlighted in red, and <code>.hidedots2</code> in cyan. These are the rectangles that hide the ellipsis when there's no invisible text:</p>

<p><img src="https://i.stack.imgur.com/NE3QH.png" alt="the same image as above, except that the helper elements are highlighted in color"></p>

<p>Tested in IE9, IE8 (emulated), Chrome, Firefox, Safari, and Opera. Does not work in IE7.</p>


blocks|key|967983|text|为了完整起见，我只想补充这个问题。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|967984|-o-ellipsis-lastline.|offset|length|967985|dotdotdot是一个很棒的插件，|unordered-list-item|967986|Opera对此提供了非标准的支持。|967987|967988|967989|entityMap|0|LINK|mutability|MUTABLE|url|http://dev.opera.com/static/dstorey/text/text-overflow.html|1|http://dotdotdot.frebsite.nl/^0|0|0|K|0|0|0|9|1|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|X|8|@]|9|@$D|Y|E|Z|1|10]]|A|$]]|$1|F|3|G|5|H|7|11|8|@]|9|@$D|12|E|13|1|14]]|A|$]]|$1|I|3|J|5|H|7|15|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|16|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|17|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|18|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]|U|$5|P|Q|R|A|$S|V]]]]

<p>Just want to add to this question for completeness sake. </p>

<ul>
<li>Opera has non-standard support for this called <a href="http://dev.opera.com/static/dstorey/text/text-overflow.html" rel="noreferrer">-o-ellipsis-lastline</a>.</li>
<li><a href="http://dotdotdot.frebsite.nl/" rel="noreferrer">dotdotdot</a> is a great jQuery plugin I can recommend.</li>
</ul>


blocks|key|968047|text|下面的链接提供了解决此问题的纯HTML+/+CSS解决方案。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|968048|浏览器支持-如文章所述：|968049|968050|到目前为止，我们已经在Safari5.0，IE9(必须在标准模式下)，Opera12和Firefox15上进行了测试。|blockquote|968051|968052|较老的浏览器仍然可以很好地工作，因为布局的核心是正常的定位、边距和填充属性。如果你的平台比较旧(例如Firefox3.6，IE8)，你可以使用这种方法，但是可以将渐变重做为独立的PNG图像或DirectX滤镜。|968053|968054|http://www.mobify.com/dev/multiline-ellipsis-in-pure-css|offset|length|968055|css：|968056|p+{+margin:+0;+padding:+0;+font-family:+sans-serif;}

.ellipsis+{
++++overflow:+hidden;
++++height:+200px;
++++line-height:+25px;
++++margin:+20px;
++++border:+5px+solid+#AAA;+}

.ellipsis:before+{
++++content:"";
++++float:+left;
++++width:+5px;+height:+200px;+}

.ellipsis+>+*:first-child+{
++++float:+right;
++++width:+100%25;
++++margin-left:+-5px;+}++++++++

.ellipsis:after+{
++++content:+"\02026";++

++++box-sizing:+content-box;
++++-webkit-box-sizing:+content-box;
++++-moz-box-sizing:+content-box;

++++float:+right;+position:+relative;
++++top:+-25px;+left:+100%25;+
++++width:+3em;+margin-left:+-3em;
++++padding-right:+5px;

++++text-align:+right;

++++background:+-webkit-gradient(linear,+left+top,+right+top,
++++++++from(rgba(255,+255,+255,+0)),+to(white),+color-stop(50%25,+white));
++++background:+-moz-linear-gradient(to+right,+rgba(255,+255,+255,+0),+white+50%25,+white);+++++++++++
++++background:+-o-linear-gradient(to+right,+rgba(255,+255,+255,+0),+white+50%25,+white);
++++background:+-ms-linear-gradient(to+right,+rgba(255,+255,+255,+0),+white+50%25,+white);
++++background:+linear-gradient(to+right,+rgba(255,+255,+255,+0),+white+50%25,+white);+}|code-block|syntax|javascript|968057|html：|968058|<div+class="ellipsis">
++++<div>
++++++++<p>Call+me+Ishmael.++Some+years+ago+&ndash;+never+mind+how+long+precisely+&ndash;+having+little+or+no+money+in+my+purse,+and+nothing+particular+to+interest+me+on+shore,+I+thought+I+would+sail+about+a+little+and+see+the+watery+part+of+the+world.++It+is+a+way+I+have+of+driving+off+the+spleen,+and+regulating+the+circulation.++Whenever+I+find+myself+growing+grim+about+the+mouth;+whenever+it+is+a+damp,+drizzly+November+in+my+soul;+whenever+I+find+myself+involuntarily+pausing+before+coffin+warehouses,+and+bringing+up+the+rear+of+every+funeral+I+meet;+and+especially+whenever+my+hypos+get+such+an+upper+hand+of+me,+that+it+requires+a+strong+moral+principle+to+prevent+me+from+deliberately+stepping+into+the+street,+and+methodically+knocking+people's+hats+off+&ndash;+then,+I+account+it+high+time+to+get+to+sea+as+soon+as+I+can.</p>++
++++</div>
</div>|968059|the+fiddle|968060|(调整浏览器窗口的大小以进行测试)|968061|entityMap|0|LINK|mutability|MUTABLE|url|1|http://jsfiddle.net/LJ62x/^0|0|0|0|0|0|0|0|0|1K|0|0|0|0|0|0|4|6|1|0|0^^$0|@$1|2|3|4|5|6|7|1D|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1E|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|1F|8|@]|9|@]|A|$]]|$1|E|3|F|5|G|7|1G|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|1H|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|1I|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|1J|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|1K|8|@]|9|@$N|1L|O|1M|1|1N]]|A|$]]|$1|P|3|Q|5|6|7|1O|8|@]|9|@]|A|$]]|$1|R|3|S|5|T|7|1P|8|@]|9|@]|A|$U|V]]|$1|W|3|X|5|6|7|1Q|8|@]|9|@]|A|$]]|$1|Y|3|Z|5|T|7|1R|8|@]|9|@]|A|$U|V]]|$1|10|3|11|5|6|7|1S|8|@]|9|@$N|1T|O|1U|1|1V]]|A|$]]|$1|12|3|13|5|6|7|1W|8|@]|9|@]|A|$]]|$1|14|3|-4|5|6|7|1X|8|@]|9|@]|A|$]]]|15|$16|$5|17|18|19|A|$1A|M]]|1B|$5|17|18|19|A|$1A|1C]]]]

<p>The link below provides a pure HTML / CSS solution to this problem.</p>

<p>Browser support - as stated in the article:</p>

<blockquote>
  <p>So far we have tested on Safari 5.0, IE 9 (must be in standards mode),
  Opera 12 and Firefox 15.</p>
  
  <p>Older browsers will still work quite well, as the meat of the layout
  is in normal positioning, margin and padding properties. if your
  platform is older (e.g. Firefox 3.6, IE 8), you can use the method but
  redo the gradient as a standalone PNG image or DirectX filter.</p>
</blockquote>

<p><a href="http://www.mobify.com/dev/multiline-ellipsis-in-pure-css" rel="noreferrer">http://www.mobify.com/dev/multiline-ellipsis-in-pure-css</a></p>

<h2>the css:</h2>

<pre><code>p { margin: 0; padding: 0; font-family: sans-serif;}

.ellipsis {
    overflow: hidden;
    height: 200px;
    line-height: 25px;
    margin: 20px;
    border: 5px solid #AAA; }

.ellipsis:before {
    content:"";
    float: left;
    width: 5px; height: 200px; }

.ellipsis &gt; *:first-child {
    float: right;
    width: 100%;
    margin-left: -5px; }        

.ellipsis:after {
    content: "\02026";  

    box-sizing: content-box;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;

    float: right; position: relative;
    top: -25px; left: 100%; 
    width: 3em; margin-left: -3em;
    padding-right: 5px;

    text-align: right;

    background: -webkit-gradient(linear, left top, right top,
        from(rgba(255, 255, 255, 0)), to(white), color-stop(50%, white));
    background: -moz-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);           
    background: -o-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
    background: -ms-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
    background: linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white); }
</code></pre>

<h2>the html:</h2>

<pre><code>&lt;div class="ellipsis"&gt;
    &lt;div&gt;
        &lt;p&gt;Call me Ishmael.  Some years ago &amp;ndash; never mind how long precisely &amp;ndash; having little or no money in my purse, and nothing particular to interest me on shore, I thought I would sail about a little and see the watery part of the world.  It is a way I have of driving off the spleen, and regulating the circulation.  Whenever I find myself growing grim about the mouth; whenever it is a damp, drizzly November in my soul; whenever I find myself involuntarily pausing before coffin warehouses, and bringing up the rear of every funeral I meet; and especially whenever my hypos get such an upper hand of me, that it requires a strong moral principle to prevent me from deliberately stepping into the street, and methodically knocking people's hats off &amp;ndash; then, I account it high time to get to sea as soon as I can.&lt;/p&gt;  
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<h1>the <a href="http://jsfiddle.net/LJ62x/" rel="noreferrer">fiddle</a></h1>

<p>(resize browser's window for testing)</p>


blocks|key|968104|text|这是最近的一篇css-tricks+article，讨论了这一点。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|968105|上面文章中的一些解决方案(这里没有提到)是|968106|1)+-webkit-line-clamp和2)将一个绝对定位的元素放在右下角，淡出|style|CODE|968107|这两种方法都假定有以下标记：|968108|<div+class="module">+/*+Add+line-clamp/fade+class+here*/
++<p>Text+here</p>
</div>|code-block|syntax|javascript|968109|使用css|968110|.module+{
++width:+250px;
++overflow:+hidden;
}|968111|1)+-webkit-线夹|968112|+(..for最多3行)|968113|.line-clamp+{
++display:+-webkit-box;
++-webkit-line-clamp:+3;
++-webkit-box-orient:+vertical;++
++max-height:+3.6em;+/*+I+needed+this+to+get+it+to+work+*/
}|968114|2)淡出|968115|968116|假设您将行高设置为1.2em。如果我们想公开三行文本，我们可以将容器的高度设为3.6em+(1.2em×3)。隐藏的溢出将隐藏其余部分。|blockquote|968117|968118|968119|968120|p
{
++++margin:0;padding:0;
}
.module+{
++width:+250px;
++overflow:+hidden;
++border:+1px+solid+green;
++margin:+10px;
}

.fade+{
++position:+relative;
++height:+3.6em;+/*+exactly+three+lines+*/
}
.fade:after+{
++content:+"";
++text-align:+right;
++position:+absolute;
++bottom:+0;
++right:+0;
++width:+70%25;
++height:+1.2em;
++background:+linear-gradient(to+right,+rgba(255,+255,+255,+0),+rgba(255,+255,+255,+1)+50%25);
}|968121|解决方案#3+-使用@supports的组合|968122|我们可以使用@supports在webkit浏览器上应用webkit的线夹，并在其他浏览器中应用淡出。|968123|968124|<div+class="module+line-clamp">
++<p>Pellentesque+habitant+morbi+tristique+senectus+et+netus+et+malesuada+fames+ac+turpis+egestas.+Vestibulum+tortor+quam,+feugiat+vitae,+ultricies+eget,+tempor+sit+amet,+ante.+Donec+eu+libero+sit+amet+quam+egestas+semper.+Aenean+ultricies+mi+vitae+est.+Mauris+placerat+eleifend+leo.</p>
</div>|968125|CSS|968126|.module+{
++width:+250px;
++overflow:+hidden;
++border:+1px+solid+green;
++margin:+10px;
}

.line-clamp+{
++++++position:+relative;
++++++height:+3.6em;+/*+exactly+three+lines+*/
++++}
.line-clamp:after+{
++++++content:+"";
++++++text-align:+right;
++++++position:+absolute;
++++++bottom:+0;
++++++right:+0;
++++++width:+70%25;
++++++height:+1.2em;
++++++background:+linear-gradient(to+right,+rgba(255,+255,+255,+0),+rgba(255,+255,+255,+1)+50%25);
+}

@supports+(-webkit-line-clamp:+3)+{
++++.line-clamp+{
++++++++display:+-webkit-box;
++++++++-webkit-line-clamp:+3;
++++++++-webkit-box-orient:+vertical;++
++++++++max-height:3.6em;+/*+I+needed+this+to+get+it+to+work+*/
++++++++height:+auto;
++++}
++++.line-clamp:after+{
++++++++display:+none;
++++}
}|968127|entityMap|0|LINK|mutability|MUTABLE|url|http://css-tricks.com/line-clampin/|1|http://www.w3.org/TR/css3-conditional/#at-supports^0|7|I|0|0|0|3|I|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|A|9|1|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1W|8|@]|9|@$A|1X|B|1Y|1|1Z]]|C|$]]|$1|D|3|E|5|6|7|20|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|21|8|@$A|22|B|23|H|I]]|9|@]|C|$]]|$1|J|3|K|5|6|7|24|8|@]|9|@]|C|$]]|$1|L|3|M|5|N|7|25|8|@]|9|@]|C|$O|P]]|$1|Q|3|R|5|6|7|26|8|@]|9|@]|C|$]]|$1|S|3|T|5|N|7|27|8|@]|9|@]|C|$O|P]]|$1|U|3|V|5|6|7|28|8|@]|9|@]|C|$]]|$1|W|3|X|5|6|7|29|8|@]|9|@]|C|$]]|$1|Y|3|Z|5|N|7|2A|8|@]|9|@]|C|$O|P]]|$1|10|3|11|5|6|7|2B|8|@]|9|@]|C|$]]|$1|12|3|-4|5|6|7|2C|8|@]|9|@]|C|$]]|$1|13|3|14|5|15|7|2D|8|@]|9|@]|C|$]]|$1|16|3|-4|5|6|7|2E|8|@]|9|@]|C|$]]|$1|17|3|-4|5|6|7|2F|8|@]|9|@]|C|$]]|$1|18|3|-4|5|6|7|2G|8|@]|9|@]|C|$]]|$1|19|3|1A|5|N|7|2H|8|@]|9|@]|C|$O|P]]|$1|1B|3|1C|5|6|7|2I|8|@]|9|@$A|2J|B|2K|1|2L]]|C|$]]|$1|1D|3|1E|5|6|7|2M|8|@]|9|@]|C|$]]|$1|1F|3|-4|5|6|7|2N|8|@]|9|@]|C|$]]|$1|1G|3|1H|5|N|7|2O|8|@]|9|@]|C|$O|P]]|$1|1I|3|1J|5|6|7|2P|8|@]|9|@]|C|$]]|$1|1K|3|1L|5|N|7|2Q|8|@]|9|@]|C|$O|P]]|$1|1M|3|-4|5|6|7|2R|8|@]|9|@]|C|$]]]|1N|$1O|$5|1P|1Q|1R|C|$1S|1T]]|1U|$5|1P|1Q|1R|C|$1S|1V]]]]

<p>Here's a recent <a href="http://css-tricks.com/line-clampin/" rel="noreferrer">css-tricks article</a> which discusses this.</p>

<p>Some of the solutions in the above article (which are not mentioned here) are</p>

<p>1) <code>-webkit-line-clamp</code> and 2) Place an absolutely positioned element to the bottom right with fade out</p>

<p>Both methods assume the following markup:</p>

<pre><code>&lt;div class="module"&gt; /* Add line-clamp/fade class here*/
  &lt;p&gt;Text here&lt;/p&gt;
&lt;/div&gt;
</code></pre>

<p>with css</p>

<pre><code>.module {
  width: 250px;
  overflow: hidden;
}
</code></pre>

<h2>1) -webkit-line-clamp</h2>

<p><strong><a href="http://jsfiddle.net/danield770/DpQ7e/" rel="noreferrer">line-clamp FIDDLE</a></strong> (..for a maximum of 3 lines)</p>

<pre><code>.line-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;  
  max-height: 3.6em; /* I needed this to get it to work */
}
</code></pre>

<h2>2) fade out</h2>

<blockquote>
  <p>Let's say you set the line-height to 1.2em. If we want to expose
  three lines of text, we can just make the height of the container
  3.6em (1.2em × 3). The hidden overflow will hide the rest.</p>
</blockquote>

<p><strong><a href="http://jsfiddle.net/danield770/DpQ7e/1/" rel="noreferrer">Fade out FIDDLE</a></strong></p>

<pre><code>p
{
    margin:0;padding:0;
}
.module {
  width: 250px;
  overflow: hidden;
  border: 1px solid green;
  margin: 10px;
}

.fade {
  position: relative;
  height: 3.6em; /* exactly three lines */
}
.fade:after {
  content: "";
  text-align: right;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 70%;
  height: 1.2em;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%);
}
</code></pre>

<h2>Solution #3 - A combination using <a href="http://www.w3.org/TR/css3-conditional/#at-supports" rel="noreferrer">@supports</a></h2>

<p>We can use @supports to apply webkit's line-clamp on webkit browsers and apply fade out in other browsers.</p>

<p><strong><a href="http://jsfiddle.net/danield770/DpQ7e/30/" rel="noreferrer">@supports line-clamp with fade fallback fiddle</a></strong> </p>

<pre><code>&lt;div class="module line-clamp"&gt;
  &lt;p&gt;Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.&lt;/p&gt;
&lt;/div&gt;
</code></pre>

<h2>CSS</h2>

<pre><code>.module {
  width: 250px;
  overflow: hidden;
  border: 1px solid green;
  margin: 10px;
}

.line-clamp {
      position: relative;
      height: 3.6em; /* exactly three lines */
    }
.line-clamp:after {
      content: "";
      text-align: right;
      position: absolute;
      bottom: 0;
      right: 0;
      width: 70%;
      height: 1.2em;
      background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%);
 }

@supports (-webkit-line-clamp: 3) {
    .line-clamp {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;  
        max-height:3.6em; /* I needed this to get it to work */
        height: auto;
    }
    .line-clamp:after {
        display: none;
    }
}
</code></pre>


blocks|key|4659476|text|这是我仅使用css就能得到的最接近的解决方案。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4659477|HTML|4659478|<div+class="ellipsis">+<span>...</span>
Hello+this+is+Mr_Green+from+Stackoverflow.+I+love+CSS.+I+live+in+CSS+and+I+will+never+leave+working+on+CSS+even+my+work+is+on+other+technologies.</div>|code-block|syntax|javascript|4659479|CSS|4659480|div+{
++++height:+3em;
++++line-height:+1.5em;
++++width:+80%25;
++++border:+1px+solid+green;
++++overflow:+hidden;
++++position:+relative;
}
div:after+{
++++content:".+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.++.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.++.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.++.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.";
++++background-color:+white;
++++color:+white;
++++display:+inline;
++++position:+relative;
++++box-shadow:+8px+1px+1px+white;
++++z-index:+1;
}
span+{
++++position:+absolute;
++++bottom:+0px;
++++right:+0px;
++++background-color:+white;
}|4659481|Working+Fiddle+(调整窗口大小以进行检查)|offset|length|4659482|Link+to+my+blog+for+explanation|4659483|Updated+Fiddle|4659484|我希望现在一些css专家已经有了如何使其完美的想法。:)|4659485|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/venkateshwar/LJ62x/20/|1|http://www.uxrim.com/technical/2014/01/06/ellipsis-on-second-line-using-pure-css/|2|http://jsfiddle.net/venkateshwar/LJ62x/28/^0|0|0|0|0|0|0|E|0|0|0|V|1|0|0|E|2|0|0^^$0|@$1|2|3|4|5|6|7|18|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|19|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|1A|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|1B|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|1C|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|1D|8|@]|9|@$O|1E|P|1F|1|1G]]|A|$]]|$1|Q|3|R|5|6|7|1H|8|@]|9|@$O|1I|P|1J|1|1K]]|A|$]]|$1|S|3|T|5|6|7|1L|8|@]|9|@$O|1M|P|1N|1|1O]]|A|$]]|$1|U|3|V|5|6|7|1P|8|@]|9|@]|A|$]]|$1|W|3|-4|5|6|7|1Q|8|@]|9|@]|A|$]]]|X|$Y|$5|Z|10|11|A|$12|13]]|14|$5|Z|10|11|A|$12|15]]|16|$5|Z|10|11|A|$12|17]]]]

<p>Here is the closest solution I could get using just css.</p>

<h3>HTML</h3>

<pre><code>&lt;div class="ellipsis"&gt; &lt;span&gt;...&lt;/span&gt;
Hello this is Mr_Green from Stackoverflow. I love CSS. I live in CSS and I will never leave working on CSS even my work is on other technologies.&lt;/div&gt;
</code></pre>

<h3>CSS</h3>

<pre><code>div {
    height: 3em;
    line-height: 1.5em;
    width: 80%;
    border: 1px solid green;
    overflow: hidden;
    position: relative;
}
div:after {
    content:". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  . . . . . . . . . . . . . . . . . . . . . . . . . . . .";
    background-color: white;
    color: white;
    display: inline;
    position: relative;
    box-shadow: 8px 1px 1px white;
    z-index: 1;
}
span {
    position: absolute;
    bottom: 0px;
    right: 0px;
    background-color: white;
}
</code></pre>

<h2><a href="http://jsfiddle.net/venkateshwar/LJ62x/20/" rel="nofollow">Working Fiddle</a> (<em>resize the window to check</em>)</h2>

<h3><a href="http://www.uxrim.com/technical/2014/01/06/ellipsis-on-second-line-using-pure-css/" rel="nofollow">Link to my blog for explanation</a></h3>

<h2><a href="http://jsfiddle.net/venkateshwar/LJ62x/28/" rel="nofollow">Updated Fiddle</a></h2>

<p>I hope now some css expert would have got idea on how to make it perfect. :)</p>


blocks|key|4659521|text|参加这个派对有点晚，但我想出了一个独特的解决方案。与其尝试通过css技巧或js插入您自己的省略号，我想我应该尝试使用仅限单行的限制。因此，我为每个“行”复制文本，并使用负文本缩进来确保一行从最后一行结束处开始。FIDDLE|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4659522|CSS:|style|BOLD|4659523|#wrapper{
++++font-size:+20pt;
++++line-height:+22pt;
++++width:+100%25;
++++overflow:+hidden;
++++padding:+0;
++++margin:+0;
}

.text-block-line{
++++height:+22pt;
++++display:+inline-block;
++++max-width:+100%25;
++++overflow:+hidden;
++++white-space:+nowrap;
++++width:+auto;
}
.text-block-line:last-child{
++++text-overflow:+ellipsis;
}

/*the+follwing+is+suboptimal+but+neccesary+I+think.+I'd+probably+just+make+a+sass+mixin+that+I+can+feed+a+max+number+of+lines+to+and+have+them+avialable.+Number+of+lines+will+need+to+be+controlled+by+server+or+client+template+which+is+no+worse+than+doing+a+character+count+clip+server+side+now.+*/
.line2{
++++text-indent:+-100%25;
}
.line3{
++++text-indent:+-200%25;
}
.line4{
++++text-indent:+-300%25;
}|code-block|syntax|javascript|4659524|HTML：|4659525|<p+id="wrapper"+class="redraw">
++++<span+class="text-block-line+line1">This+text+is+repeated+for+every+line+that+you+want+to+be+displayed+in+your+element.+This+example+has+a+max+of+4+lines+before+the+ellipsis+occurs.+Try+scaling+the+preview+window+width+to+see+the+effect.</span>
++++<span+class="text-block-line+line2">This+text+is+repeated+for+every+line+that+you+want+to+be+displayed+in+your+element.+This+example+has+a+max+of+4+lines+before+the+ellipsis+occurs.+Try+scaling+the+preview+window+width+to+see+the+effect.</span>
++++<span+class="text-block-line+line3">This+text+is+repeated+for+every+line+that+you+want+to+be+displayed+in+your+element.+This+example+has+a+max+of+4+lines+before+the+ellipsis+occurs.+Try+scaling+the+preview+window+width+to+see+the+effect.</span>
++++<span+class="text-block-line+line4">This+text+is+repeated+for+every+line+that+you+want+to+be+displayed+in+your+element.+This+example+has+a+max+of+4+lines+before+the+ellipsis+occurs.+Try+scaling+the+preview+window+width+to+see+the+effect.</span>
</p>|4659526|更多细节见小提琴。浏览器回流有一个问题，我使用了JS重绘，所以请检查它，但这是基本概念。任何想法/建议都是非常感谢的。|4659527|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/lupos/8PdqL/7/^0|2X|6|0|0|0|4|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@$A|11|B|12|1|13]]|C|$]]|$1|D|3|E|5|6|7|14|8|@$A|15|B|16|F|G]]|9|@]|C|$]]|$1|H|3|I|5|J|7|17|8|@]|9|@]|C|$K|L]]|$1|M|3|N|5|6|7|18|8|@]|9|@]|C|$]]|$1|O|3|P|5|J|7|19|8|@]|9|@]|C|$K|L]]|$1|Q|3|R|5|6|7|1A|8|@]|9|@]|C|$]]|$1|S|3|-4|5|6|7|1B|8|@]|9|@]|C|$]]]|T|$U|$5|V|W|X|C|$Y|Z]]]]

<p>Bit late to this party but I came up with, what I think, is a unique solution. Rather than trying to insert your own ellipsis through css trickery or js I thought i'd try and roll with the single line only restriction. So I duplicate the text for every "line" and just use a negative text-indent to make sure one line starts where the last one stops. <a href="http://jsfiddle.net/lupos/8PdqL/7/" rel="nofollow">FIDDLE</a></p>

<p><strong>CSS:</strong></p>

<pre><code>#wrapper{
    font-size: 20pt;
    line-height: 22pt;
    width: 100%;
    overflow: hidden;
    padding: 0;
    margin: 0;
}

.text-block-line{
    height: 22pt;
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    width: auto;
}
.text-block-line:last-child{
    text-overflow: ellipsis;
}

/*the follwing is suboptimal but neccesary I think. I'd probably just make a sass mixin that I can feed a max number of lines to and have them avialable. Number of lines will need to be controlled by server or client template which is no worse than doing a character count clip server side now. */
.line2{
    text-indent: -100%;
}
.line3{
    text-indent: -200%;
}
.line4{
    text-indent: -300%;
}
</code></pre>

<p><strong>HTML:</strong></p>

<pre><code>&lt;p id="wrapper" class="redraw"&gt;
    &lt;span class="text-block-line line1"&gt;This text is repeated for every line that you want to be displayed in your element. This example has a max of 4 lines before the ellipsis occurs. Try scaling the preview window width to see the effect.&lt;/span&gt;
    &lt;span class="text-block-line line2"&gt;This text is repeated for every line that you want to be displayed in your element. This example has a max of 4 lines before the ellipsis occurs. Try scaling the preview window width to see the effect.&lt;/span&gt;
    &lt;span class="text-block-line line3"&gt;This text is repeated for every line that you want to be displayed in your element. This example has a max of 4 lines before the ellipsis occurs. Try scaling the preview window width to see the effect.&lt;/span&gt;
    &lt;span class="text-block-line line4"&gt;This text is repeated for every line that you want to be displayed in your element. This example has a max of 4 lines before the ellipsis occurs. Try scaling the preview window width to see the effect.&lt;/span&gt;
&lt;/p&gt;
</code></pre>

<p>More details in the fiddle. There is an issue with the browser reflowing that I use a JS redraw for and such so do check it out but this is the basic concept. Any thoughts/suggestions are much appreciated.</p>


blocks|key|2870040|text|我发现这个css+(scss)解决方案工作得很好。在webkit浏览器上，它显示省略号，而在其他浏览器上，它只截断文本。这对我的预期用途来说很好。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2870041|$font-size:+26px;
$line-height:+1.4;
$lines-to-show:+3;

h2+{
++display:+block;+/*+Fallback+for+non-webkit+*/
++display:+-webkit-box;
++max-width:+400px;
++height:+$font-size*$line-height*$lines-to-show;+/*+Fallback+for+non-webkit+*/
++margin:+0+auto;
++font-size:+$font-size;
++line-height:+$line-height;
++-webkit-line-clamp:+$lines-to-show;
++-webkit-box-orient:+vertical;
++overflow:+hidden;
++text-overflow:+ellipsis;
}|code-block|syntax|javascript|2870042|创建者的示例：http://codepen.io/martinwolf/pen/qlFdp|offset|length|2870043|entityMap|0|LINK|mutability|MUTABLE|url|http://codepen.io/martinwolf/pen/qlFdp^0|0|0|7|12|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

<p>I've found this css (scss) solution that works quite well. On webkit browsers it shows the ellipsis and on other browsers it just truncates the text. Which is fine for my intended use.</p>

<pre><code>$font-size: 26px;
$line-height: 1.4;
$lines-to-show: 3;

h2 {
  display: block; /* Fallback for non-webkit */
  display: -webkit-box;
  max-width: 400px;
  height: $font-size*$line-height*$lines-to-show; /* Fallback for non-webkit */
  margin: 0 auto;
  font-size: $font-size;
  line-height: $line-height;
  -webkit-line-clamp: $lines-to-show;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
</code></pre>

<p>An example by the creator: <a href="http://codepen.io/martinwolf/pen/qlFdp" rel="noreferrer">http://codepen.io/martinwolf/pen/qlFdp</a></p>


blocks|key|2586134|text|我发现了一个javascript技巧，但你必须使用字符串的长度。假设你想要3行宽度为250px的行，你可以计算每行的长度，即|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2586135|//get+the+total+character+length.
//Haha+this+might+vary+if+you+have+a+text+with+lots+of+"i"+vs+"w"
var+totalLength+=+(width+/+yourFontSize)+*+yourNumberOfLines

//then+ellipsify
function+shorten(text,+totalLength)+{
++++var+ret+=+text;
++++if+(ret.length+>+totalLength)+{
++++++++ret+=+ret.substr(0,+totalLength-3)+%2B+"...";
++++}
++++return+ret;
}|code-block|syntax|javascript|2586136|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>I found a javascript trick, but you have to use the length of the string. Lets say you want 3 lines of width 250px, you can calculate the length per line i.e.</p>

<pre><code>//get the total character length.
//Haha this might vary if you have a text with lots of "i" vs "w"
var totalLength = (width / yourFontSize) * yourNumberOfLines

//then ellipsify
function shorten(text, totalLength) {
    var ret = text;
    if (ret.length &gt; totalLength) {
        ret = ret.substr(0, totalLength-3) + "...";
    }
    return ret;
}
</code></pre>


blocks|key|968317|text|display:+-webkit-box;
-webkit-line-clamp:+3;
-webkit-box-orient:+vertical;+|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|968318|see+more+click+here|unstyled|offset|length|968319|entityMap|0|LINK|mutability|MUTABLE|url|http://css-tricks.com/line-clampin/^0|0|0|J|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|R|8|@]|9|@$G|S|H|T|1|U]]|A|$]]|$1|I|3|-4|5|F|7|V|8|@]|9|@]|A|$]]]|J|$K|$5|L|M|N|A|$O|P]]]]

<pre><code>display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical; 
</code></pre>

<p><a href="http://css-tricks.com/line-clampin/" rel="nofollow">see more click here</a></p>


blocks|key|2586166|text|谢谢@balpha和@Kevin，我将两个方法结合在一起。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2586167|这个方法不需要js。|2586168|你可以使用background-image并且不需要渐变来隐藏点。|offset|length|style|CODE|2586169|.ellipsis-placeholder的innerHTML不是必须的，我使用.ellipsis-placeholder来保持和.ellipsis-more相同的宽度和高度。您可以改用display:+inline-block。|2586170|​|2586171|.ellipsis+{
++++overflow:+hidden;
++++position:+relative;
}
.ellipsis-more-top+{/*push+down+.ellipsis-more*/
++++content:+"";
++++float:+left;
++++width:+5px;
}
.ellipsis-text-container+{
++++float:+right;
++++width:+100%25;
++++margin-left:+-5px;
}
.ellipsis-more-container+{
++++float:+right;
++++position:+relative;
++++left:+100%25;
++++width:+5px;
++++margin-left:+-5px;
++++border-right:+solid+5px+transparent;
++++white-space:+nowrap;
}
.ellipsis-placeholder+{/*keep+text+around+,keep+it+transparent+,keep+same+width+and+height+as+.ellipsis-more*/
++++float:+right;
++++clear:+right;
++++color:+transparent;
}
.ellipsis-placeholder-top+{/*push+down+.ellipsis-placeholder*/
++++float:+right;
++++width:+0;
}
.ellipsis-more+{/*ellipsis+things+here*/
++++float:+right;
}
.ellipsis-height+{/*the+total+height*/
++++height:+3.6em;
}
.ellipsis-line-height+{/*the+line-height*/
++++line-height:+1.2;
}
.ellipsis-margin-top+{/*one+line+height*/
++++margin-top:+-1.2em;
}
.ellipsis-text+{
++++word-break:+break-all;
}|code-block|syntax|javascript|2586172|<div+class="ellipsis+ellipsis-height+ellipsis-line-height">
++++<div+class="ellipsis-more-top+ellipsis-height"></div>
++++<div+class="ellipsis-text-container">
++++++++<div+class="ellipsis-placeholder-top+ellipsis-height+ellipsis-margin-top"></div>
++++++++<div+class="ellipsis-placeholder">
+++++++++++<span>...</span><span>more</span>
++++++++</div>
++++++++<span+class="ellipsis-text">text+text+text+text+text+text+text+text+text+text+text+text+text+text+text+text+text+text+text+text+text+text+text+text+text+text+text+text+text+text+text+text+text+text+text+text+text+text+text+text+text+text+text+text+text+text+text+text+text+text+text+text+text+text+text+text+text+text+text+</span>
++++</div>
++++<div+class="ellipsis-more-container+ellipsis-margin-top">
++++++++<div+class="ellipsis-more">
++++++++++++<span>...</span><span>more</span>
++++++++</div>
++++</div>
</div>|2586173|2586174|jsfiddler|2586175|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/2fg8dfas/1/^0|0|0|5|G|0|0|L|M|9|14|L|1T|E|2L|L|0|0|0|0|0|0|9|0|0^^$0|@$1|2|3|4|5|6|7|15|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|16|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|17|8|@$F|18|G|19|H|I]]|9|@]|A|$]]|$1|J|3|K|5|6|7|1A|8|@$F|1B|G|1C|H|I]|$F|1D|G|1E|H|I]|$F|1F|G|1G|H|I]|$F|1H|G|1I|H|I]|$F|1J|G|1K|H|I]]|9|@]|A|$]]|$1|L|3|M|5|6|7|1L|8|@]|9|@]|A|$]]|$1|N|3|O|5|P|7|1M|8|@]|9|@]|A|$Q|R]]|$1|S|3|T|5|P|7|1N|8|@]|9|@]|A|$Q|R]]|$1|U|3|M|5|6|7|1O|8|@]|9|@]|A|$]]|$1|V|3|W|5|6|7|1P|8|@]|9|@$F|1Q|G|1R|1|1S]]|A|$]]|$1|X|3|-4|5|6|7|1T|8|@]|9|@]|A|$]]]|Y|$Z|$5|10|11|12|A|$13|14]]]]

<p>thanks @balpha and @Kevin, I combine two method together. </p>

<p>no js needed in this method.</p>

<p>you can use <code>background-image</code> and no gradient needed to hide dots.</p>

<p>the <code>innerHTML</code> of <code>.ellipsis-placeholder</code> is not necessary, I use <code>.ellipsis-placeholder</code> to keep the same width and height with <code>.ellipsis-more</code>.
You could use <code>display: inline-block</code> instead.</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.ellipsis {
    overflow: hidden;
    position: relative;
}
.ellipsis-more-top {/*push down .ellipsis-more*/
    content: "";
    float: left;
    width: 5px;
}
.ellipsis-text-container {
    float: right;
    width: 100%;
    margin-left: -5px;
}
.ellipsis-more-container {
    float: right;
    position: relative;
    left: 100%;
    width: 5px;
    margin-left: -5px;
    border-right: solid 5px transparent;
    white-space: nowrap;
}
.ellipsis-placeholder {/*keep text around ,keep it transparent ,keep same width and height as .ellipsis-more*/
    float: right;
    clear: right;
    color: transparent;
}
.ellipsis-placeholder-top {/*push down .ellipsis-placeholder*/
    float: right;
    width: 0;
}
.ellipsis-more {/*ellipsis things here*/
    float: right;
}
.ellipsis-height {/*the total height*/
    height: 3.6em;
}
.ellipsis-line-height {/*the line-height*/
    line-height: 1.2;
}
.ellipsis-margin-top {/*one line height*/
    margin-top: -1.2em;
}
.ellipsis-text {
    word-break: break-all;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="ellipsis ellipsis-height ellipsis-line-height"&gt;
    &lt;div class="ellipsis-more-top ellipsis-height"&gt;&lt;/div&gt;
    &lt;div class="ellipsis-text-container"&gt;
        &lt;div class="ellipsis-placeholder-top ellipsis-height ellipsis-margin-top"&gt;&lt;/div&gt;
        &lt;div class="ellipsis-placeholder"&gt;
           &lt;span&gt;...&lt;/span&gt;&lt;span&gt;more&lt;/span&gt;
        &lt;/div&gt;
        &lt;span class="ellipsis-text"&gt;text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text &lt;/span&gt;
    &lt;/div&gt;
    &lt;div class="ellipsis-more-container ellipsis-margin-top"&gt;
        &lt;div class="ellipsis-more"&gt;
            &lt;span&gt;...&lt;/span&gt;&lt;span&gt;more&lt;/span&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p><a href="http://jsfiddle.net/2fg8dfas/1/" rel="nofollow">jsfiddler</a></p>


blocks|key|968620|text|javascript解决方案会更好|type|unstyled|depth|inlineStyleRanges|entityRanges|data|968621|968622|获取文本的行数如果窗口调整大小或元素更改|unordered-list-item|968623|，则切换is-ellipsis类|offset|length|style|CODE|968624|getRowRects|968625|Element.getClientRects()的工作方式与this类似|968626|​|968627|📷|atomic|968628|968629|同一行中的每个rects具有相同的top值，因此找出具有不同top值的rects，如this|968630|968631|968632|968633|function+getRowRects(element)+{
++++var+rects+=+[],
++++++++clientRects+=+element.getClientRects(),
++++++++len+=+clientRects.length,
++++++++clientRect,+top,+rectsLen,+rect,+i;

++++for(i=0;+i<len;+i%2B%2B)+{
++++++++has+=+false;
++++++++rectsLen+=+rects.length;
++++++++clientRect+=+clientRects[i];
++++++++top+=+clientRect.top;
++++++++while(rectsLen--)+{
++++++++++++rect+=+rects[rectsLen];
++++++++++++if+(rect.top+==+top)+{
++++++++++++++++has+=+true;
++++++++++++++++break;
++++++++++++}
++++++++}
++++++++if(has)+{
++++++++++++rect.right+=+rect.right+>+clientRect.right+?+rect.right+:+clientRect.right;
++++++++++++rect.width+=+rect.right+-+rect.left;
++++++++}
++++++++else+{
++++++++++++rects.push({
++++++++++++++++top:+clientRect.top,
++++++++++++++++right:+clientRect.right,
++++++++++++++++bottom:+clientRect.bottom,
++++++++++++++++left:+clientRect.left,
++++++++++++++++width:+clientRect.width,
++++++++++++++++height:+clientRect.height
++++++++++++});
++++++++}
++++}
++++return+rects;
}|code-block|syntax|javascript|968634|浮点...more|968635|像this一样|968636|968637|968638|968639|检测窗口大小调整或元素更改|968640|968641|968642|968643|968644|968645|968646|968647|968648|968649|968650|entityMap|0|LINK|mutability|MUTABLE|url|http://codepen.io/defims/pen/XdmPmV|1|IMAGE|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/3c4983fc579b4773b040c689f6884433.jpeg|imageAlt|2|http://codepen.io/defims/pen/YqwqGq|3|https://ask.qcloudimg.com/http-save/yehe-900000/c4da9a1a9f9a76b04f3d3eae92e7ba1e.jpeg|4|http://codepen.io/defims/pen/EKPgGO|5|https://ask.qcloudimg.com/http-save/yehe-900000/91359f5a022963a4eef0ad72a8a25eaa.jpeg|6|http://codepen.io/defims/pen/jqWMJG|7|https://ask.qcloudimg.com/http-save/yehe-900000/18fdec0166601485dbb1908a0521ea4f.jpeg|8|https://ask.qcloudimg.com/http-save/yehe-900000/4991743647db769f6e766a88c254ecbc.jpeg|9|https://ask.qcloudimg.com/http-save/yehe-900000/46d30029cdb445622685744394bc3acc.jpeg^0|0|0|0|4|B|0|0|0|O|U|4|0|0|0|0|1|1|0|0|H|3|U|3|16|4|2|0|0|0|1|3|0|0|0|2|7|0|1|4|4|0|0|0|1|5|0|0|0|1|4|6|0|0|0|1|7|0|0|0|0|1|8|0|0|0|0|1|9|0|0^^$0|@$1|2|3|4|5|6|7|2I|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|2J|8|@]|9|@]|A|$]]|$1|C|3|D|5|E|7|2K|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|2L|8|@$H|2M|I|2N|J|K]]|9|@]|A|$]]|$1|L|3|M|5|6|7|2O|8|@]|9|@]|A|$]]|$1|N|3|O|5|6|7|2P|8|@$H|2Q|I|2R|J|K]]|9|@$H|2S|I|2T|1|2U]]|A|$]]|$1|P|3|Q|5|6|7|2V|8|@]|9|@]|A|$]]|$1|R|3|S|5|T|7|2W|8|@]|9|@$H|2X|I|2Y|1|2Z]]|A|$]]|$1|U|3|Q|5|6|7|30|8|@]|9|@]|A|$]]|$1|V|3|W|5|6|7|31|8|@$H|32|I|33|J|K]|$H|34|I|35|J|K]]|9|@$H|36|I|37|1|38]]|A|$]]|$1|X|3|Q|5|6|7|39|8|@]|9|@]|A|$]]|$1|Y|3|S|5|T|7|3A|8|@]|9|@$H|3B|I|3C|1|3D]]|A|$]]|$1|Z|3|Q|5|6|7|3E|8|@]|9|@]|A|$]]|$1|10|3|11|5|12|7|3F|8|@]|9|@]|A|$13|14]]|$1|15|3|16|5|6|7|3G|8|@$H|3H|I|3I|J|K]]|9|@]|A|$]]|$1|17|3|18|5|6|7|3J|8|@]|9|@$H|3K|I|3L|1|3M]]|A|$]]|$1|19|3|Q|5|6|7|3N|8|@]|9|@]|A|$]]|$1|1A|3|S|5|T|7|3O|8|@]|9|@$H|3P|I|3Q|1|3R]]|A|$]]|$1|1B|3|Q|5|6|7|3S|8|@]|9|@]|A|$]]|$1|1C|3|1D|5|6|7|3T|8|@]|9|@]|A|$]]|$1|1E|3|18|5|6|7|3U|8|@]|9|@$H|3V|I|3W|1|3X]]|A|$]]|$1|1F|3|Q|5|6|7|3Y|8|@]|9|@]|A|$]]|$1|1G|3|S|5|T|7|3Z|8|@]|9|@$H|40|I|41|1|42]]|A|$]]|$1|1H|3|Q|5|6|7|43|8|@]|9|@]|A|$]]|$1|1I|3|Q|5|6|7|44|8|@]|9|@]|A|$]]|$1|1J|3|S|5|T|7|45|8|@]|9|@$H|46|I|47|1|48]]|A|$]]|$1|1K|3|Q|5|6|7|49|8|@]|9|@]|A|$]]|$1|1L|3|Q|5|6|7|4A|8|@]|9|@]|A|$]]|$1|1M|3|S|5|T|7|4B|8|@]|9|@$H|4C|I|4D|1|4E]]|A|$]]|$1|1N|3|Q|5|6|7|4F|8|@]|9|@]|A|$]]|$1|1O|3|-4|5|6|7|4G|8|@]|9|@]|A|$]]]|1P|$1Q|$5|1R|1S|1T|A|$1U|1V]]|1W|$5|1X|1S|1Y|A|$1Z|20|21|-4]]|22|$5|1R|1S|1T|A|$1U|23]]|24|$5|1X|1S|1Y|A|$1Z|25|21|-4]]|26|$5|1R|1S|1T|A|$1U|27]]|28|$5|1X|1S|1Y|A|$1Z|29|21|-4]]|2A|$5|1R|1S|1T|A|$1U|2B]]|2C|$5|1X|1S|1Y|A|$1Z|2D|21|-4]]|2E|$5|1X|1S|1Y|A|$1Z|2F|21|-4]]|2G|$5|1X|1S|1Y|A|$1Z|2H|21|-4]]]]

<p>javascript solution will be better</p>

<ul>
<li>get the lines number of text</li>
<li>toggle <code>is-ellipsis</code> class if the window resize or elment change</li>
</ul>

<h2>getRowRects</h2>

<p><code>Element.getClientRects()</code> works like <a href="http://codepen.io/defims/pen/XdmPmV" rel="nofollow noreferrer">this</a></p>

<p><a href="https://i.stack.imgur.com/Htqob.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Htqob.jpg" alt="enter image description here"></a></p>

<p>each rects in the same row has the same <code>top</code> value, so find out the rects with different <code>top</code> value, like <a href="http://codepen.io/defims/pen/YqwqGq" rel="nofollow noreferrer">this</a></p>

<p><a href="https://i.stack.imgur.com/07eq1.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/07eq1.jpg" alt="enter image description here"></a></p>

<pre><code>function getRowRects(element) {
    var rects = [],
        clientRects = element.getClientRects(),
        len = clientRects.length,
        clientRect, top, rectsLen, rect, i;

    for(i=0; i&lt;len; i++) {
        has = false;
        rectsLen = rects.length;
        clientRect = clientRects[i];
        top = clientRect.top;
        while(rectsLen--) {
            rect = rects[rectsLen];
            if (rect.top == top) {
                has = true;
                break;
            }
        }
        if(has) {
            rect.right = rect.right &gt; clientRect.right ? rect.right : clientRect.right;
            rect.width = rect.right - rect.left;
        }
        else {
            rects.push({
                top: clientRect.top,
                right: clientRect.right,
                bottom: clientRect.bottom,
                left: clientRect.left,
                width: clientRect.width,
                height: clientRect.height
            });
        }
    }
    return rects;
}
</code></pre>

<h2>float <code>...more</code></h2>

<p>like <a href="http://codepen.io/defims/pen/EKPgGO" rel="nofollow noreferrer">this</a></p>

<p><a href="https://i.stack.imgur.com/tZXgf.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tZXgf.jpg" alt="enter image description here"></a></p>

<h2>detect window resize or element changed</h2>

<p>like <a href="http://codepen.io/defims/pen/jqWMJG" rel="nofollow noreferrer">this</a></p>

<p><a href="https://i.stack.imgur.com/cWU6p.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cWU6p.jpg" alt="enter image description here"></a></p>

<p><a href="https://i.stack.imgur.com/9zaZA.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9zaZA.jpg" alt="enter image description here"></a></p>

<p><a href="https://i.stack.imgur.com/RDISc.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RDISc.jpg" alt="enter image description here"></a></p>


blocks|key|968704|text|这里有很多答案，但我需要一个答案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|968705|968706|CSS+Only|unordered-list-item|968707|Future-proof+(与时间更兼容)|968708|不会拆分单词(仅在空格上换行)|968709|968710|968711|需要注意的是，它没有为那些不支持-webkit-line-clamp规则的浏览器(目前是IE、Edge、Firefox)提供省略号，但它确实使用了渐变来淡出文本。|offset|length|style|CODE|968712|​|968713|.clampMe+{
++position:+relative;
++height:+2.4em;+
++overflow:+hidden;
}

.clampMe:after+{
++content:+"";
++text-align:+right;
++position:+absolute;
++bottom:+0;
++right:+0;
++width:+50%25;
++height:+1.2em;+/*+Just+use+multiples+of+the+line-height+*/
++background:+linear-gradient(to+right,+rgba(255,+255,+255,+0),+rgba(255,+255,+255,+1)+80%25);
}

/*+Now+add+in+code+for+the+browsers+that+support+-webkit-line-clamp+and+overwrite+the+non-supportive+stuff+*/
@supports+(-webkit-line-clamp:+2)+{
++.clampMe+{
++++++overflow:+hidden;
++++++text-overflow:+ellipsis;
++++++display:+-webkit-box;
++++++-webkit-line-clamp:+2;
++++++-webkit-box-orient:+vertical;
++}
++
++.clampMe:after+{
++++display:+none;
++}
}|code-block|syntax|javascript|968714|<p+class="clampMe">There's+a+lot+more+text+in+here+than+what+you'll+ever+see.+Pellentesque+habitant+testalotish+morbi+tristique+senectus+et+netus+et+malesuada+fames+ac+turpis+egestas.+Vestibulum+tortor+quam,+feugiat+vitae,+ultricies+eget,+tempor+sit+amet,+ante.+Donec+eu+libero+sit+amet+quam+egestas+semper.+Aenean+ultricies+mi+vitae+est.+Mauris+placerat+eleifend+leo.</p>|968715|968716|您可以在this+CodePen中看到它的运行情况，还可以看到一个Javascript+version+here+(无jQuery)。|968717|entityMap|0|LINK|mutability|MUTABLE|url|http://codepen.io/nilsynils/pen/KgaRBo|1|http://codepen.io/nilsynils/pen/zKNpkm?editors=1111^0|0|0|0|1|1|0|0|G|I|0|0|0|0|0|4|C|0|X|N|1|0^^$0|@$1|2|3|4|5|6|7|1D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|1E|8|@]|9|@]|A|$]]|$1|C|3|D|5|E|7|1F|8|@]|9|@]|A|$]]|$1|F|3|G|5|E|7|1G|8|@]|9|@]|A|$]]|$1|H|3|I|5|E|7|1H|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|1I|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|1J|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|1K|8|@$N|1L|O|1M|P|Q]]|9|@]|A|$]]|$1|R|3|S|5|6|7|1N|8|@]|9|@]|A|$]]|$1|T|3|U|5|V|7|1O|8|@]|9|@]|A|$W|X]]|$1|Y|3|Z|5|V|7|1P|8|@]|9|@]|A|$W|X]]|$1|10|3|S|5|6|7|1Q|8|@]|9|@]|A|$]]|$1|11|3|12|5|6|7|1R|8|@]|9|@$N|1S|O|1T|1|1U]|$N|1V|O|1W|1|1X]]|A|$]]|$1|13|3|-4|5|6|7|1Y|8|@]|9|@]|A|$]]]|14|$15|$5|16|17|18|A|$19|1A]]|1B|$5|16|17|18|A|$19|1C]]]]

<p>There are many answers here but I needed one that was:</p>

<ul>
<li>CSS Only</li>
<li>Future-proof (gets more compatible with time)</li>
<li>Not going to break words apart (only breaks on spaces)</li>
</ul>

<p>The caveat is that it doesn't provide an ellipsis for the browsers that don't support the <code>-webkit-line-clamp</code> rule (currently IE, Edge, Firefox) but it does use a gradient to fade their text out.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.clampMe {
  position: relative;
  height: 2.4em; 
  overflow: hidden;
}

.clampMe:after {
  content: "";
  text-align: right;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 50%;
  height: 1.2em; /* Just use multiples of the line-height */
  background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 80%);
}

/* Now add in code for the browsers that support -webkit-line-clamp and overwrite the non-supportive stuff */
@supports (-webkit-line-clamp: 2) {
  .clampMe {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
  }
  
  .clampMe:after {
    display: none;
  }
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p class="clampMe"&gt;There's a lot more text in here than what you'll ever see. Pellentesque habitant testalotish morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.&lt;/p&gt;</code></pre>
</div>
</div>
</p>

<p>You can see it in action in <a href="http://codepen.io/nilsynils/pen/KgaRBo" rel="noreferrer">this CodePen</a> and you can also see a <a href="http://codepen.io/nilsynils/pen/zKNpkm?editors=1111" rel="noreferrer">Javascript version here</a> (no jQuery).</p>


blocks|key|2870476|text|一种基于-webkit-line-clamp的纯css方法：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2870477|​|2870478|@-webkit-keyframes+ellipsis+{/*for+test*/
++++0%25+{+width:+622px+}
++++50%25+{+width:+311px+}
++++100%25+{+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%25;
++++width:+100%25;
++++height:+100%25;
++++overflow:+hidden;

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

++++/**
++++background:+lightgreen;
++++/**/
}
.ellipsis+.placeholder+{
++++float:+left;
++++width:+50%25;
++++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;
++++/**/
}|code-block|syntax|javascript|2870479|<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>|2870480|2870481|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p>a pure css method base on -webkit-line-clamp:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>@-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;
    /**/
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class='ellipsis'&gt;
    &lt;div class='content'&gt;
        &lt;div class='text'&gt;text text text text text text text text text text text text text text text text text text text text text &lt;/div&gt;
        &lt;div class='overlay'&gt;
            &lt;div class='placeholder'&gt;&lt;/div&gt;
            &lt;div class='more'&gt;...more&lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


<p>with</p>

<pre><code>overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
</code></pre>

<p>"..." will be shown in the end of the line if overflowed.
However, this will be shown only in one line.
But I would like it to be shown in multi-lines.</p>

<p>It may looks like:</p>

<pre><code>+--------------------+
|abcde feg hij   dkjd|
|dsji jdia js ajid  s|
|jdis ajid dheu d ...|/*Here it's overflowed, so "..." is shown. */
+--------------------+
</code></pre>


With CSS, use "..." for overflowed block of multi-lines

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

使用overflow: hidden;text-overflow: ellipsis;white-space: nowrap;"...“如果溢出，将在行尾显示。但是，这将只在一行中显示。但我希望它以多行的形式显示。它可能看起来像这样：+--------------------+|abcde feg hij   dkjd...

问对于CSS，使用"...“用于多行的溢出块
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问对于CSS，使用"...“用于多行的溢出块EN