blocks|key|972585|text|对于支持它的浏览器(大多数现代浏览器)，只需使用线夹，而对于较旧的浏览器，则回退到1行。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|972586|++.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;
++++}
++}|code-block|syntax|javascript|972587|browser+support|offset|length|972588|entityMap|0|LINK|mutability|MUTABLE|url|https://caniuse.com/#search=line-clamp^0|0|0|0|F|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>Just use line-clamp for the browsers that support it(most modern browsers) and fall back to 1 line for older.</p>
<pre><code>  .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;
    }
  }
</code></pre>
<p><a href="https://caniuse.com/#search=line-clamp" rel="noreferrer">browser support</a></p>


blocks|key|756933|text|我发现Skeep的回答还不够，还需要一个overflow风格：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|756934|overflow:+hidden;
text-overflow:+ellipsis;
-webkit-line-clamp:+2;
display:+-webkit-box;
-webkit-box-orient:+vertical;|code-block|syntax|javascript|756935|entityMap^0|K|8|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

<p>I found that Skeep's answer was not enough and needed an <code>overflow</code> style too:</p>

<pre><code>overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
display: -webkit-box;
-webkit-box-orient: vertical;
</code></pre>


blocks|key|756888|text|正如其他人已经回答的那样，纯CSS解决方案并不存在。有一个非常容易使用的jQuery插件，它叫做dotdotdot。它使用容器的宽度和高度来计算是否需要截断和添加省略号。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|756889|$("#multilinedElement").dotdotdot();|code-block|syntax|javascript|756890|这是一个jsFiddle。|756891|entityMap|0|LINK|mutability|MUTABLE|url|http://jquery.com/|1|http://dotdotdot.frebsite.nl/|2|http://jsfiddle.net/qEsQf/^0|10|6|0|1C|9|1|0|0|4|8|2|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@$A|X|B|Y|1|Z]|$A|10|B|11|1|12]]|C|$]]|$1|D|3|E|5|F|7|13|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|14|8|@]|9|@$A|15|B|16|1|17]]|C|$]]|$1|K|3|-4|5|6|7|18|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]|S|$5|N|O|P|C|$Q|T]]|U|$5|N|O|P|C|$Q|V]]]]

<p>As others have already answered, a pure CSS solution does not exists.
There is a <a href="http://jquery.com/" rel="noreferrer" title="jQuery">jQuery</a> plugin that is very easy to use, it is called <a href="http://dotdotdot.frebsite.nl/" rel="noreferrer">dotdotdot</a>.
It uses the container's width and height to calculate if it needs to truncate and add ellipsis.</p>

<pre><code>$("#multilinedElement").dotdotdot();
</code></pre>

<p>Here is a <a href="http://jsfiddle.net/qEsQf/" rel="noreferrer">jsFiddle</a>.</p>


blocks|key|756912|text|如果有人正在使用SASS/SCSS，偶然发现了这个问题--也许这个混搭可能会有所帮助：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|756913|@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+%2B+unquote('em');
}|code-block|syntax|javascript|756914|这只会在webkit浏览器中添加省略号。休息会把它切掉。|756915|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>if someone is using SASS/SCSS and stumbles upon this question - maybe this mixin could be of help:</p>

<pre><code>@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');
}
</code></pre>

<p>this only adds the ellipsis in webkit browsers. rest just cuts it off.</p>


blocks|key|972342|text|你不能让它在两行以上工作，这太可惜了！如果元素是显示块，并将高度设置为2em或其他值，并且当文本溢出时，它将显示省略号，这将是非常棒的！|type|unstyled|depth|inlineStyleRanges|entityRanges|data|972343|对于单个衬垫，您可以使用：|972344|.show-ellipsis+{
++++overflow:+hidden;
++++text-overflow:+ellipsis;
++++white-space:+nowrap;
}|code-block|syntax|javascript|972345|对于多行，您可能可以使用github+http://pvdspek.github.com/jquery.autoellipsis/上的jQuery自动省略之类的多边形填充|offset|length|972346|entityMap|0|LINK|mutability|MUTABLE|url|http://pvdspek.github.com/jquery.autoellipsis/^0|0|0|0|J|1A|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|W|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|X|8|@]|9|@$K|Y|L|Z|1|10]]|A|$]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]]]

<p>What a shame that you can't get it to work over two lines! Would be awesome if the element was display block and had a height set to 2em or something, and when the text overflowed it would show an ellipsis! </p>

<p>For a single liner you can use:</p>

<pre><code>.show-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
</code></pre>

<p>For multiple lines maybe you could use a Polyfill such as jQuery autoellipsis which is on github <a href="http://pvdspek.github.com/jquery.autoellipsis/">http://pvdspek.github.com/jquery.autoellipsis/</a></p>


blocks|key|972534|text|下面是用纯css编写的很好的example。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|972535|​|972536|.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%2B.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;
}|code-block|syntax|javascript|972537|<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>|972538|972539|entityMap|0|LINK|mutability|MUTABLE|url|http://hackingui.com/front-end/a-pure-css-solution-for-multiline-text-truncation/^0|E|7|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@$A|W|B|X|1|Y]]|C|$]]|$1|D|3|E|5|6|7|Z|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|10|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|H|7|11|8|@]|9|@]|C|$I|J]]|$1|M|3|E|5|6|7|12|8|@]|9|@]|C|$]]|$1|N|3|-4|5|6|7|13|8|@]|9|@]|C|$]]]|O|$P|$5|Q|R|S|C|$T|U]]]]

<p>here is good <a href="http://hackingui.com/front-end/a-pure-css-solution-for-multiline-text-truncation/" rel="noreferrer">example</a> in pure css.</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>.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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;


&lt;div class="block-with-text"&gt;
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
&lt;/div&gt;

&lt;div class="block-with-text"&gt;
Lorem Ipsum is simply dummy text of the printing and typesetting industry
&lt;/div&gt;


&lt;div class="block-with-text"&gt;
Lorem Ipsum is simply
&lt;/div&gt;

&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|972817|text|我将这些css属性用于行省略-|type|unstyled|depth|inlineStyleRanges|entityRanges|data|972818|overflow:+hidden;
text-overflow:+ellipsis;
display:+-webkit-box;
-webkit-line-clamp:+3;+
-webkit-box-orient:+vertical;|code-block|syntax|javascript|972819|这里的-webkit-line-clamp:+3;是行数(3行)，后面是...显示。|offset|length|style|CODE|972820|entityMap^0|0|0|3|M|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@$I|R|J|S|K|L]]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>I used these css properties for line ellipsis-</p>
<pre><code>overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3; 
-webkit-box-orient: vertical;
</code></pre>
<p>here  <code>-webkit-line-clamp: 3;</code>  is the number of line(3 lines) after which ... shows.</p>


blocks|key|757114|text|用纯css方法对多行文本进行省略裁剪|type|unstyled|depth|inlineStyleRanges|entityRanges|data|757115|调整文本容器的高度，控制线按-webkit-+line+-clamp折断:+2；|757116|.block-ellipsis+{
++display:+block;
++display:+-webkit-box;
++max-width:+100%25;
++height:+30px;
++margin:+0+auto;
++font-size:+14px;
++line-height:+1;
++-webkit-line-clamp:+2;
++-webkit-box-orient:+vertical;
++overflow:+hidden;
++text-overflow:+ellipsis;
}|code-block|syntax|javascript|757117|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>Pure css way of trim multiline text with ellipsis</p>

<p>Adjust text container's hight,
control line to break by   -webkit-line-clamp: 2;</p>

<pre><code>.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;
}
</code></pre>


blocks|key|972301|text|它是一个非标准的CSS，在当前版本的CSS中没有涉及(Firefox不支持它)。请尝试使用JavaScript。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|972302|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>It is a non-standard CSS, which is not covered in current version of CSS (Firefox does not support it). Try to use JavaScript instead.</p>


blocks|key|972724|text|这里所有的答案都是错误的，他们遗漏了重要的一部分，高度|type|unstyled|depth|inlineStyleRanges|entityRanges|data|972725|.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>|code-block|syntax|javascript|972726|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>All the answers here are wrong, they missing important piece, the height</p>

<pre class="lang-html prettyprint-override"><code>.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;
    }
&lt;div class="container"&gt;
    &lt;div class="title"&gt;this is a long text you cant cut it in half&lt;/div&gt;
&lt;/div&gt;
</code></pre>


blocks|key|756855|text|我以前遇到过这个问题，没有纯粹的css解决方案|type|unstyled|depth|inlineStyleRanges|entityRanges|data|756856|这就是为什么我开发了一个小型库来处理这个问题(以及其他问题)。该库提供了用于建模和执行字母级文本呈现的对象。例如，您可以模拟具有任意限制(不需要一行)的text-overflow:省略号。|756857|在http://www.samuelrossille.com/home/jstext.html上阅读更多屏幕截图、教程和下载链接。|offset|length|756858|entityMap|0|LINK|mutability|MUTABLE|url|http://www.samuelrossille.com/home/jstext.html^0|0|0|1|1A|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|R|8|@]|9|@$F|S|G|T|1|U]]|A|$]]|$1|H|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|I|$J|$5|K|L|M|A|$N|O]]]]

<p>I've met this issue before, and there is no pure css solution</p>

<p>That's why i have developped a small library to deal with this issue (among others). The library provides objects to modelize and perform letter-level text rendering. You can for example emulate a text-overflow: ellipsis with an arbitrary limit (not necessary one line)</p>

<p>Read more at <a href="http://www.samuelrossille.com/home/jstext.html" rel="nofollow">http://www.samuelrossille.com/home/jstext.html</a> for screenshot, tutorial, and dowload link.</p>


blocks|key|972883|text|Sass辅助对象混合：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|972884|对于那些使用像Sass这样的预处理器的用户，您可以使用一个带有可选参数lines的mixin，该参数默认为1，这使得在元素上应用文本截断非常方便，并在需要时更改行数：|offset|length|style|CODE|972885|@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;
++++}
}|code-block|syntax|javascript|972886|用法：|972887|.some-title+{
++++@include+text-ellipsis($lines:+2);
}|972888|entityMap^0|0|Z|5|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@$D|U|E|V|F|G]]|9|@]|A|$]]|$1|H|3|I|5|J|7|W|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|X|8|@]|9|@]|A|$]]|$1|O|3|P|5|J|7|Y|8|@]|9|@]|A|$K|L]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

<h2>Sass helper mixin:</h2>
<p>For those who are using a preprocessor like Sass, you could have a mixin with an optional parameter called <code>lines</code> which defaults to 1, this makes it very convenient to apply text truncation on an element, and change the number of lines when you need:</p>
<pre class="lang-css prettyprint-override"><code>@mixin text-ellipsis($lines: 1) {
    text-overflow: ellipsis;
    overflow: hidden;
    @if ($lines &gt; 1) {
        display: -webkit-box;
        -webkit-line-clamp: $lines;
        -webkit-box-orient: vertical;
    } @else {
        white-space: nowrap;
    }
}
</code></pre>
<p>Usage:</p>
<pre class="lang-css prettyprint-override"><code>.some-title {
    @include text-ellipsis($lines: 2);
}
</code></pre>


blocks|key|756971|text|一种基于-webkit-line-clamp的纯css方法，适用于webkit：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|756972|​|756973|@-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|756974|<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>|756975|756976|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, which works on webkit:</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>


blocks|key|972621|text|没有真正简单的方法可以做到这一点。使用Clamp.js库。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|972622|$clamp(myHeader,+{clamp:+3});|code-block|syntax|javascript|972623|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/josephschmitt/Clamp.js/^0|J|8|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

<p>No real easy way to do this. Use the <a href="https://github.com/josephschmitt/Clamp.js/" rel="nofollow noreferrer">Clamp.js</a> library.</p>

<pre><code>$clamp(myHeader, {clamp: 3});
</code></pre>


blocks|key|757216|text|延迟回复，但是html换行符也可以，所以你可以只做html+%2B+css的解决方案。因此，通常使用br元素是不好的做法，但是如果您用br断开您的注释，文本溢出省略号将从html文本的下一行开始。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|757217|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>Late Reply but a html line-break works as well, so you can do a html + css only solution. So it's bad practice to usually use the br element, but if you break your comment with br the text-overflow ellipsis will start on the next line of the html text.</p>


<p>CSS <code>text-overflow: ellipsis</code> on second line, is this possible? I can't find it on the net.</p>

<p>example:</p>

<p>what I want is like this:</p>

<pre><code>I hope someone could help me. I need 
an ellipsis on the second line of...
</code></pre>

<p>but what's happening is this:</p>

<pre><code>I hope someone could help me. I ... 
</code></pre>


css ellipsis on second line

容器

jQuery

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

问第二行的css省略号
EN

回答 15

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问第二行的css省略号EN

回答 15

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问第二行的css省略号
EN