blocks|key|56799|text|公认的答案是很棒的。但是，您仍然可以使用%25+width并获得text-overflow:+ellipsis。解决方案很简单：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|56800|display:+inline-block;+/*+for+inline+elements+e.g.+span,+strong,+em+etc+*/
text-overflow:+ellipsis;
width:+calc(80%25);+/*+The+trick+is+here!+*/|code-block|syntax|javascript|56801|似乎每当您使用calc时，最终的值都是以绝对像素呈现的，这会相应地将80%25转换为类似于800px的1000px-width容器。因此，请使用width:+calc([YOUR+PERCENT]%25)而不是width:+[YOUR+PERCENT]%25。|56802|entityMap^0|K|1|U|N|0|0|7|4|Y|3|17|5|1D|6|1Y|S|2T|M|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]|$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|U|8|@$9|V|A|W|B|C]|$9|X|A|Y|B|C]|$9|Z|A|10|B|C]|$9|11|A|12|B|C]|$9|13|A|14|B|C]|$9|15|A|16|B|C]]|D|@]|E|$]]|$1|M|3|-4|5|6|7|17|8|@]|D|@]|E|$]]]|N|$]]

<p>The accepted answer is awesome. However, you can still use <code>%</code> width and attain <code>text-overflow: ellipsis</code>. The solution is simple:</p>
<pre><code>display: inline-block; /* for inline elements e.g. span, strong, em etc */
text-overflow: ellipsis;
width: calc(80%); /* The trick is here! */
</code></pre>
<p>It seems whenever you use <code>calc</code>, the final value is rendered in absolute pixels, which consequentially converts <code>80%</code> to something like <code>800px</code> for a <code>1000px</code>-width container. Therefore, instead of using <code>width: [YOUR PERCENT]%</code>, use <code>width: calc([YOUR PERCENT]%)</code>.</p>


blocks|key|56906|text|因此，如果您遇到这个问题是因为您在尝试让省略号在display:+flex容器中工作时遇到了问题，那么请尝试将min-width:+0添加到溢出其父容器的最外面的容器中，即使您已经为它设置了一个overflow:+hidden，看看它是如何为您工作的。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|56907|更多详细信息和aj-foster在此codepen上的一个工作示例。在我的情况下完全成功了。|56908|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/aj-foster|1|https://codepen.io/aj-foster/pen/emBYPW^0|O|D|1J|C|2P|G|0|7|9|0|I|7|1|0^^$0|@$1|2|3|4|5|6|7|R|8|@$9|S|A|T|B|C]|$9|U|A|V|B|C]|$9|W|A|X|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Y|8|@]|D|@$9|Z|A|10|1|11]|$9|12|A|13|1|14]]|E|$]]|$1|H|3|-4|5|6|7|15|8|@]|D|@]|E|$]]]|I|$J|$5|K|L|M|E|$N|O]]|P|$5|K|L|M|E|$N|Q]]]]

<p>So if you reach this question because you're having trouble trying to get the ellipsis working inside a <code>display: flex</code> container, try adding <code>min-width: 0</code> to the outmost container that's overflowing its parent even though you already set a <code>overflow: hidden</code> to it and see how that works for you.</p>

<p>More details and a working example on this <a href="https://codepen.io/aj-foster/pen/emBYPW" rel="noreferrer">codepen</a> by <a href="https://github.com/aj-foster" rel="noreferrer">aj-foster</a>. Totally did the trick in my case.</p>


blocks|key|56737|text|包括在信息之后写入的四行，以便省略号起作用|type|unstyled|depth|inlineStyleRanges|entityRanges|data|56738|.app+a
{
+color:+#fff;
+font:+bold+15px/18px+Arial;
+height:+18px;
+margin:+0+5px+0+5px;
+padding:+0;
+position:+relative;
+text-align:+center;
+text-decoration:+none;
+width:+140px;

+/*+
+Note:+The+Below+4+Lines+are+necessary+for+ellipsis+to+work.
+*/

+display:+block;/*+Change+it+as+per+your+requirement.+*/
+overflow:+hidden;
+text-overflow:+ellipsis;
+white-space:+nowrap;
}|code-block|syntax|javascript|56739|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>Include the four lines written after the info for ellipsis to work</p>

<pre><code>.app a
{
 color: #fff;
 font: bold 15px/18px Arial;
 height: 18px;
 margin: 0 5px 0 5px;
 padding: 0;
 position: relative;
 text-align: center;
 text-decoration: none;
 width: 140px;

 /* 
 Note: The Below 4 Lines are necessary for ellipsis to work.
 */

 display: block;/* Change it as per your requirement. */
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}
</code></pre>


blocks|key|56973|text|我也遇到过同样的问题，上面的解决方案似乎都不适用于Safari。对于非safari浏览器，这很好用：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|56974|display:+block;+/*+or+in-line+block+according+to+your+requirement+*/
overflow:+hidden;
white-space:+nowrap;
text-overflow:+ellipsis;|code-block|syntax|javascript|56975|对于Safari，这就是对我有效的方法。请注意，用于检查浏览器是否为Safari的媒体查询可能会随着时间的推移而改变，所以如果媒体查询对您不起作用，则只需对其进行修补即可。使用line-clamp属性，也可以在web中有多行省略号，请参见here。|offset|length|style|CODE|56976|//+Media-query+for+Safari-only+browser.
@media+not+all+and+(min-resolution:+0.001dpcm)+{
++@media+{
++++-webkit-line-clamp:+1;
++++-webkit-box-orient:+vertical;
++++display:+-webkit-box;
++++white-space:+normal;
++}
}|56977|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp^0|0|0|2G|A|3B|4|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Y|8|@$I|Z|J|10|K|L]]|9|@$I|11|J|12|1|13]]|A|$]]|$1|M|3|N|5|D|7|14|8|@]|9|@]|A|$E|F]]|$1|O|3|-4|5|6|7|15|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]]]

<p>I faced the same issue and it seems like none of the solution above works for Safari. For non-safari browser, this works just fine:</p>

<pre><code>display: block; /* or in-line block according to your requirement */
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
</code></pre>

<p>For Safari, this is the one that works for me. Note that the media query to check if the browser is Safari might change over time, so just tinker with the media query if it doesn't work for you. With <code>line-clamp</code> property, it would also be possible to have multiple lines in the web with ellipsis, see <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp" rel="noreferrer">here</a>.</p>

<pre><code>// Media-query for Safari-only browser.
@media not all and (min-resolution: 0.001dpcm) {
  @media {
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    white-space: normal;
  }
}
</code></pre>


blocks|key|56618|text|将display:+block;或display:+inline-block;添加到您的#User_Apps_Content+.DLD_App+a|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|56619|demo|56620|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/BdQgB/1/^0|1|F|H|M|18|T|0|0|4|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@$9|Q|A|R|B|C]|$9|S|A|T|B|C]|$9|U|A|V|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|W|8|@]|D|@$9|X|A|Y|1|Z]]|E|$]]|$1|H|3|-4|5|6|7|10|8|@]|D|@]|E|$]]]|I|$J|$5|K|L|M|E|$N|O]]]]

<p>Add <code>display: block;</code> or <code>display: inline-block;</code> to your <code>#User_Apps_Content .DLD_App a</code></p>

<p><a href="http://jsfiddle.net/BdQgB/1/" rel="noreferrer">demo</a></p>


blocks|key|57016|text|我一直有这个问题，我想要一个可以轻松处理动态宽度的解决方案。该解决方案使用css网格。代码如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|57017|​|57018|.parent+{
++display:+grid;
++grid-template-columns:+auto+1fr;
}

.dynamic-width-child+{
++white-space:+nowrap;
++text-overflow:+ellipsis;
++overflow:+hidden;
}

.fixed-width-child+{
++white-space:+nowrap;
}|code-block|syntax|javascript|57019|<div+class="parent">
++<div+class="dynamic-width-child">
++++iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii+asdfhlhlafh;lshd;flhsd;lhfaaaaaaaaaaaaaaaaaaaa
++</div>
++<div+class="fixed-width-child">Why?-Zed</div>
</div>|57020|57021|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>I have been having this problem and I wanted a solution that could easily work with dynamic widths. The solution use css grid.
This is how the code looks like:</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>.parent {
  display: grid;
  grid-template-columns: auto 1fr;
}

.dynamic-width-child {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.fixed-width-child {
  white-space: nowrap;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="parent"&gt;
  &lt;div class="dynamic-width-child"&gt;
    iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii asdfhlhlafh;lshd;flhsd;lhfaaaaaaaaaaaaaaaaaaaa
  &lt;/div&gt;
  &lt;div class="fixed-width-child"&gt;Why?-Zed&lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|56698|text|您只需添加一行css：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|56699|.app+a+{
+++display:+inline-block;
}|code-block|syntax|javascript|56700|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>You just add one line css:</p>

<pre><code>.app a {
   display: inline-block;
}
</code></pre>


blocks|key|273502|text|必须包含|type|unstyled|depth|inlineStyleRanges|entityRanges|data|273503|++text-overflow:+ellipsis;
++white-space:+nowrap;
++overflow:+hidden;|code-block|syntax|javascript|273504|不能包含|273505|display:+inline|273506|应包含|273507|position:+sticky|273508|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

<p>MUST contain </p>

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

<p>MUST NOT contain</p>

<pre><code>display: inline
</code></pre>

<p>SHOULD contain</p>

<pre><code>position: sticky
</code></pre>


blocks|key|57082|text|还请确保紧邻的封闭元素具有固定的宽度，并且要应用省略号的跨度具有display:block|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|57083|entityMap^0|W|D|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

<p>Please also ensure, that the immediate enclosing element has a fixed width, and the span where you want to apply ellipsis , has a <code>display:block</code></p>


blocks|key|56845|text|我不得不在响应时做一些长描述(只取一条车道)，所以我的解决方案是让文本换行(而不是white-space:+nowrap)，而不是固定宽度，我添加了固定高度：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|56846|​|56847|span+{
++display:+inline-block;
++line-height:+1rem;
++height:+1rem;
++overflow:+hidden;
++//+OPTIONAL+LINES
++width:+75%25;
++background:+green;
++//++white-space:+normal;+default
}|code-block|syntax|javascript|56848|<span>
Lorem+ipsum+dolor+sit+amet,+consectetur+adipisicing+elit.+Commodi+quia+quod+reprehenderit+saepe+sit.+Animi+deleniti+distinctio+dolorum+iste+molestias+reiciendis+saepe.+Ea+eius+ex,+ipsam+iusto+laudantium+natus+obcaecati+quas+rem+repellat+temporibus!+A+alias+at,+atque+deserunt+dignissimos+dolor+earum,+eligendi+eveniet+exercitationem+natus+non,+odit+sint+sit+tempore+voluptate.+Commodi+culpa+ex+facere+id+minima+nihil+nulla+omnis+praesentium+quasi+quia+quibusdam+recusandae+repellat+sequi+ullam,+voluptates.+Aliquam+commodi+debitis+delectus+magnam+nulla,+omnis+sequi+sint+unde+voluptas+voluptatum.+Adipisci+aliquam+deserunt+dolor+enim+facilis+libero,+maxime+molestias,+nemo+neque+non+nostrum+placeat+reprehenderit,+rerum+ullam+vel?+A+atque+autem+consectetur+cum,+doloremque+doloribus+fugiat+hic+id+iste+nemo+nesciunt+officia+quaerat+quibusdam+quidem+quisquam+similique+sit+tempora+vel.+Accusamus+aspernatur+at+au
</span>|56849|56850|entityMap^0|15|J|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@$9|S|A|T|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|U|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|V|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|W|8|@]|D|@]|E|$K|L]]|$1|O|3|G|5|6|7|X|8|@]|D|@]|E|$]]|$1|P|3|-4|5|6|7|Y|8|@]|D|@]|E|$]]]|Q|$]]

<p>I had to make some long descriptions ellipse(take only one lane) while being responsive, so my solution was to let the text wrap(instead of <code>white-space: nowrap</code>) and instead of fixed width I added fixed height:</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>span {
  display: inline-block;
  line-height: 1rem;
  height: 1rem;
  overflow: hidden;
  // OPTIONAL LINES
  width: 75%;
  background: green;
  //  white-space: normal; default
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;span&gt;
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi quia quod reprehenderit saepe sit. Animi deleniti distinctio dolorum iste molestias reiciendis saepe. Ea eius ex, ipsam iusto laudantium natus obcaecati quas rem repellat temporibus! A alias at, atque deserunt dignissimos dolor earum, eligendi eveniet exercitationem natus non, odit sint sit tempore voluptate. Commodi culpa ex facere id minima nihil nulla omnis praesentium quasi quia quibusdam recusandae repellat sequi ullam, voluptates. Aliquam commodi debitis delectus magnam nulla, omnis sequi sint unde voluptas voluptatum. Adipisci aliquam deserunt dolor enim facilis libero, maxime molestias, nemo neque non nostrum placeat reprehenderit, rerum ullam vel? A atque autem consectetur cum, doloremque doloribus fugiat hic id iste nemo nesciunt officia quaerat quibusdam quidem quisquam similique sit tempora vel. Accusamus aspernatur at au
&lt;/span&gt;</code></pre>
</div>
</div>
</p>


blocks|key|57057|text|只需在包含该段落的div中添加|type|unstyled|depth|inlineStyleRanges|entityRanges|data|57058|white-space:+nowrap+
width:+50px;+
overflow:+hidden;
text-overflow:+ellipsis;+
border:+1px+solid+#000000;|code-block|syntax|javascript|57059|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>Just add in the div containing that paragraph</p>
<pre><code>white-space: nowrap 
width: 50px; 
overflow: hidden;
text-overflow: ellipsis; 
border: 1px solid #000000;
</code></pre>


blocks|key|273210|text|您还可以在此选择器中添加float:left;：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|273211|#User_Apps_Content+.DLD_App+a|code-block|syntax|javascript|273212|entityMap^0|C|B|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>You can also add <code>float:left;</code> inside this selector:</p>
<pre><code>#User_Apps_Content .DLD_App a
</code></pre>


<p>I don't know why this simple CSS isn't working...</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>.app a {
  height: 18px;
  width: 140px;
  padding: 0;
  overflow: hidden;
  position: relative;
  margin: 0 5px 0 5px;
  text-align: center;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #000;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="app"&gt;
  &lt;a href=""&gt;Test Test Test Test Test Test&lt;/a&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>Should cut off around the 4th "Test"</p>


CSS text-overflow: ellipsis; not working?

容器

我不知道为什么这个简单的CSS不能工作...​.app a {  height: 18px;  width: 140px;  padding: 0;  overflow: hidden;  position: relative;  margin: 0 5px 0 5px;  text-align: center;  text-decoration: none;  text-overflow: el

问CSS文本溢出:省略号；不工作？
EN

回答 12

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS文本溢出:省略号；不工作？EN

回答 12

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS文本溢出:省略号；不工作？
EN