blocks|key|662388|text|看过W3+spec+for+text-overflow之后，我认为只使用CSS是不可能的。省略是一种新特性，所以到目前为止，它可能还没有得到太多的用法或反馈。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|662389|然而，this+guy似乎问了一个类似(或相同)的问题，并且有人能够提出一个很好的jQuery解决方案。您可以在此处演示该解决方案：http://jsfiddle.net/MPkSF/|662390|如果javascript不是一个选择，我想你可能不走运……|662391|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|662585|text|问得好..。我希望有一个答案，但这是你现在能得到的最接近CSS的答案。没有省略号，但仍然非常有用。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|662586|overflow:+hidden;
line-height:+1.2em;
height:+3.6em;++++++//+3+lines+*+line-height|code-block|syntax|javascript|662587|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|879858|text|我发现这个css+(scss)解决方案工作得很好。在webkit浏览器上，它显示省略号，而在其他浏览器上，它只截断文本。这对我的预期用途来说很好。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|879859|$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|879860|创建者的示例：http://codepen.io/martinwolf/pen/qlFdp|offset|length|879861|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|662877|text|我发现了一个javascript技巧，但你必须使用字符串的长度。假设你想要3行宽度为250px的行，你可以计算每行的长度，即|type|unstyled|depth|inlineStyleRanges|entityRanges|data|662878|//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|662879|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|662892|text|display:+-webkit-box;
-webkit-line-clamp:+3;
-webkit-box-orient:+vertical;+|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|662893|see+more+click+here|unstyled|offset|length|662894|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|663114|text|谢谢@balpha和@Kevin，我将两个方法结合在一起。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|663115|这个方法不需要js。|663116|你可以使用background-image并且不需要渐变来隐藏点。|offset|length|style|CODE|663117|.ellipsis-placeholder的innerHTML不是必须的，我使用.ellipsis-placeholder来保持和.ellipsis-more相同的宽度和高度。您可以改用display:+inline-block。|663118|​|663119|.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|663120|<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>|663121|663122|jsfiddler|663123|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|663204|text|一种基于-webkit-line-clamp的纯css方法：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|663205|​|663206|@-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|663207|<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>|663208|663209|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

jQuery

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

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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