CSS 文本溢出：省略号；不工作？

CSS text-overflow: ellipsis; not working?

提问by ChristopherStrydom

I don't know why this simple CSS isn't 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: ellipsis;
  white-space: nowrap;
  color: #000;
}

<div class="app">
  <a href="">Test Test Test Test Test Test</a>
</div>

Should cut off around the 4th "Test"

应该在第 4 次“测试”前后切断

回答by Spudley

text-overflow:ellipsis;only works when the following are true:

text-overflow:ellipsis;仅当以下条件成立时才有效：

• The element's width must be constrained in px(pixels). Width in %(percentage) won't work.
• The element must have overflow:hiddenand white-space:nowrapset.

• 元素的宽度必须以px（像素）为单位。宽度%（百分比）不起作用。
• 该元素必须具有overflow:hidden并white-space:nowrap设置。

The reason you're having problems here is because the widthof your aelement isn't constrained. You do have a widthsetting, but because the element is set to display:inline(i.e. the default) it is ignoring it, and nothing else is constraining its width either.

您在这里遇到问题的原因是width您的a元素不受约束。您确实有一个width设置，但是因为该元素被设置为display:inline（即默认值），所以它忽略了它，并且没有其他任何东西限制它的宽度。

You can fix this by doing one of the following:

您可以通过执行以下操作之一来解决此问题：

• Set the element to display:inline-blockor display:block(probably the former, but depends on your layout needs).
• Set one of its container elements to display:blockand give that element a fixed widthor max-width.
• Set the element to float:leftor float:right(probably the former, but again, either should have the same effect as far as the ellipsis is concerned).

• 将元素设置为display:inline-block或display:block（可能是前者，但取决于您的布局需求）。
• 将其容器元素之一设置为display:block并为该元素指定一个固定的width或max-width。
• 将元素设置为float:leftor float:right（可能是前者，但同样，就省略号而言，两者都应该具有相同的效果）。

I'd suggest display:inline-block, since this will have the minimum collateral impact on your layout; it works very much like the display:inlinethat it's using currently as far as the layout is concerned, but feel free to experiment with the other points as well; I've tried to give as much info as possible to help you understand how these things interact together; a large part of understanding CSS is about understanding how various styles work together.

我建议display:inline-block，因为这将对您的布局产生最小的附带影响；就display:inline布局而言，它的工作原理与当前使用的非常相似，但也可以随意尝试其他点；我试图提供尽可能多的信息来帮助您了解这些事物如何相互作用；理解 CSS 的很大一部分是了解各种样式如何协同工作。

Here's a snippet with your code, with a display:inline-blockadded, to show how close you were.

这是带有您的代码的片段，并display:inline-block添加了一个，以显示您的接近程度。

.app a {
  height: 18px;
  width: 140px;
  padding: 0;
  overflow: hidden;
  position: relative;
  display: inline-block;
  margin: 0 5px 0 5px;
  text-align: center;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #000;
}

<div class="app">
  <a href="">Test Test Test Test Test Test</a>
</div>

Useful references:

有用的参考：

• https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow
• https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

• https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow
• https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

回答by Supreme Dolphin

The accepted answer is awesome. However, you can still use %width and attain text-overflow: ellipsis. The solution is simple:

接受的答案很棒。但是，您仍然可以使用%width 并达到text-overflow: ellipsis. 解决方法很简单：

display: inline-block; /* for em, a, span, etc (inline by default) */
text-overflow: ellipsis;
width: calc (80%); /* The trick is here! */

It seems whenever you use calc, the final value is rendered in absolute pixels, which consequentially converts 80%to something like 800pxfor a 1000px-width container. Therefore, instead of using width: [YOUR PERCENT]%, use width: calc([YOUR PERCENT]%).

似乎只要您使用calc终值以绝对像素，这必然转化渲染80%成类似800px的1000px-width容器。因此，不要使用width: [YOUR PERCENT]%，而是使用width: calc([YOUR PERCENT]%)。

回答by Herick

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

因此，如果您遇到这个问题是因为您在尝试让省略号在display: flex容器内工作时遇到问题，请尝试添加min-width: 0到溢出其父级的最外层容器，即使您已经overflow: hidden为它设置了 a并查看它如何为您工作。

More details and a working example on this codepenby aj-foster. Totally did the trick in my case.

更多详细信息，并在此工作的例子codepen由AJ福斯特。在我的情况下完全做到了。

回答by Tim Vermaelen

Also make sure word-wrapis set to normalfor IE10 and below.

还要确保为 IE10 及更低版本word-wrap设置为正常。

The standards referenced below define this property's behavior as being dependent on the setting of the "text-wrap" property. However, wordWrap settings are always effective in Windows Internet Explorer because Internet Explorer does not support the "text-wrap" property.

下面引用的标准将此属性的行为定义为依赖于“text-wrap”属性的设置。但是，wordWrap 设置在 Windows Internet Explorer 中始终有效，因为 Internet Explorer 不支持“text-wrap”属性。

Hence in my case, word-wrapwas set to break-word(inherited or by default?) causing text-overflowto work in FF and Chrome, but not in IE.

因此，在我的情况下，word-wrap被设置为断字（继承或默认？）导致text-overflow在 FF 和 Chrome 中工作，但不能在 IE 中工作。

ms info on word-wrap property

关于自动换行属性的 ms 信息

回答by santhoshkumar

anchor,span... tags are inline elementsby default, In case of inline elements widthproperty doesn't works. So you have to convert your element to either inline-blockor block levelelements

anchor, span... 标签默认是内联元素，如果内联元素width属性不起作用。所以你必须将你的元素转换为inline-blockorblock level元素

回答by Manoj Selvin

Include the four lines written after the info for ellipsis to work

包括在省略号工作的信息之后写的四行

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

回答by Bhojendra Rauniyar

Add display: block;or display: inline-block;to your #User_Apps_Content .DLD_App a

添加display: block;或添加display: inline-block;到您的#User_Apps_Content .DLD_App a

demo

演示

回答by Sanjib Debnath

You just add one line css:

您只需添加一行 css：

.app a {
   display: inline-block;
}

回答by NVRM

MUST contain

必须包含

  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;

MUST NOT contain

不得包含

display: inline

SHOULD contain

应该包含

position: sticky

回答by Penny Liu

In bootstrap 4, you can add a .text-truncateclass to truncate the text with an ellipsis.

在bootstrap 4 中，您可以添加一个.text-truncate类来使用省略号截断文本。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<!-- Inline level -->
<span class="d-inline-block text-truncate" style="max-width: 250px;">
  The quick brown fox jumps over the lazy dog.
</span>