CSS文本溢出:省略号; 不工作？

Question

我不知道为什么这个简单的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>

应该在4号"测试"周围切断

Answer 1

text-overflow:ellipsis; 仅在满足以下条件时才有效:

• 元素的宽度必须以px(像素)为单位.宽度%(百分比)不起作用.
• 元素必须具有overflow:hidden和white-space:nowrap设置.

你在这里遇到问题的原因是width你的a元素不受限制.你有一个width设置,但因为元素被设置为display:inline(即默认值)它忽略它,并且没有其他任何东西限制它的宽度.

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

• 将元素设置为display:inline-block或display:block(可能是前者,但取决于您的布局需求).
• 将其中一个容器元素设置为display:block并将该元素赋予固定width或max-width.
• 将元素设置为float:left或float:right(可能是前者,但是,就省略号而言,要么应该具有相同的效果).

我建议display:inline-block,因为这会对您的布局产生最小的间接影响; 它的工作方式非常类似于display:inline目前在布局方面所使用的,但也可以自由地尝试其他点; 我试图尽可能多地提供信息,以帮助您了解这些事情是如何相互作用的; 理解CSS的很大一部分是了解各种样式如何协同工作.

希望有所帮助.

这是一个包含您的代码的代码段,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>

有用的参考:

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

Answer 2

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

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

Answer 3

我一直遇到这个问题，我想要一个可以轻松处理动态宽度的解决方案。解决方案使用CSS网格。代码如下所示：

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

<div class="parent">
  <div class="dynamic-width-child">
    iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii asdfhlhlafh;lshd;flhsd;lhfaaaaaaaaaaaaaaaaaaaa
  </div>
  <div class="fixed-width-child">Why?-Zed</div>
</div>

Answer 4

接受的答案很棒.但是,您仍然可以使用%宽度和达到text-overflow: ellipsis.解决方案很简单:

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

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

Answer 5

包括写在信息后面的四行，以便省略号工作

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

Answer 6

只需添加包含该段落的 div

white-space: nowrap 
width: 50px; 
overflow: hidden;
text-overflow: ellipsis; 
border: 1px solid #000000;

Answer 7

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

演示

Answer 8

还要确保IE10及以下word-wrap设置为正常.

下面引用的标准将此属性的行为定义为依赖于"text-wrap"属性的设置.但是,wordWrap设置在Windows Internet Explorer中始终有效,因为Internet Explorer不支持"文本换行"属性.

因此在我的情况下,word-wrap设置为break-word(继承或默认？)导致text-overflow在FF和Chrome中工作,但不在IE中.

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

Answer 9

anchor,span...标签默认为内联元素,如果内联元素width属性不起作用.因此,您必须将元素转换为其中一个inline-block或block level元素

Answer 10

我遇到了同样的问题，上面的解决方案似乎都不适用于 Safari。对于非 safari 浏览器，这很好用：

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

对于 Safari，这是适合我的。请注意，用于检查浏览器是否为 Safari 的媒体查询可能会随着时间的推移而改变，因此，如果媒体查询对您不起作用，请修改它。使用line-clamp属性，也可以在 web 中使用省略号有多行，请参见此处。

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