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>

应该在第四个“Test”左右切断。

- ChristopherStrydom

---

相关内容：https://dev59.com/93RA5IYBdhLWcg3w2xwI - Adriano

相关：将省略号应用于多行文本 - Michael Benjamin

Answer 1

text-overflow:ellipsis; 只有在以下条件满足时才能起作用：

• 元素的宽度必须限制在px（像素）内。使用%（百分比）设置的宽度将不起作用。
• 元素必须设置overflow:hidden和white-space:nowrap。

你无法实现效果的原因是因为你的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

- Spudley

---

如果因响应式设计无法使用固定宽度，该怎么办？ - SearchForKnowledge

请注意，max-width也可以起作用。这对我很有帮助，因为我有一个图标必须紧贴文字的末尾，无论其所在容器的宽度如何。（否则，如果文本没有占满容器的全部宽度，该图标将浮动到右侧） - Kevin

注意：实际上并不需要使用 white-space: nowrap。即使不使用此属性，我们仍然可以看到省略号。有关多行文本的 text-overflow，请参见此Stack Overflow链接。 - gfaceless

不确定这是否是最近的变化，但在Chrome 50（beta版）中，您不必将宽度设置为像素值——“100％”也可以使用。但需要使用white-space: nowrap。 - thdoan

你无需设置固定的 width（宽度）。所需做的仅是设置 white-space: nowrap;，就可以完美实现。 - adamj

Answer 2

被接受的答案很棒。 但是，您仍然可以使用%宽度并实现text-overflow: ellipsis。 解决方案很简单：

display: inline-block; /* for inline elements e.g. span, strong, em etc */
text-overflow: ellipsis;
width: calc(80%); /* The trick is here! */

似乎无论何时使用calc，最终的值都以绝对像素呈现，这将导致将80％转换为1000px宽度容器的类似800px的值。因此，不要使用width: [YOUR PERCENT]％，而是使用width: calc([YOUR PERCENT]%)。

- Supreme Dolphin

---

太棒了，只需补充说明overflow: hidden;也是必需的。 - Omar Omeiri

在我的情况下似乎并不是这样，我有 width: calc(100% - 20px); 但没有产生溢出。 - Blye

动态宽度，例如：100%，是可行的。此外，在应用此解决方案之前，请不要忘记在父组件中添加宽度。 - Zekarias Taye Hirpo

Answer 3

如果您正在尝试在display: flex容器中使用省略号（ellipsis）时遇到问题，请尝试将 min-width: 0 添加到最外层容器，即使您已经对其设置了overflow:hidden，然后看看它是否适用于您的情况。

有关更多详细信息和一个工作示例，请查看这个codepen，作者是aj-foster。在我的情况下完全奏效了。

- Herick

---

很棒的解决方案 - 这也是这里发布的唯一一个适用于 display: flex 容器中的 position: sticky 元素的。 - James Dinsdale

我在使用Firefox时遇到了这个问题，但在Chrome上没有。我将body的display属性设置为"grid"。为了解决这个问题，我需要在网格项上（在我的情况下是body的子元素）设置min-length: 0;。 - Miad Abdi

我建议阅读另一个问题的以下答案，以深入解释“为什么这是必要的”。 - Wilt

最重要的是答案中所说的：最外层容器溢出。我不得不在不同级别的顶部2个容器中添加min-width:0。我花了6个小时才意识到这一点。 - Adrug

这个答案的解释：https://dev59.com/FFoV5IYBdhLWcg3wc-jo#66689926 - M Imam Pratama

Answer 4

我一直有这个问题，希望有一个能够轻松适用于动态宽度的解决方案。该解决方案使用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>

- YulePale

---

我发现，如果你有一个子级层次结构，你需要在所有子级上设置 dynamic-with-child。 - Marcel

根据需求，grid-template-columns 可能需要被替换为 grid-template-rows。除了这个变化之外，这是唯一一个没有任何问题或奇怪的解决方法的答案。 - ruth

Answer 5

我遇到了同样的问题，似乎上面的解决方案都不适用于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;
  }
}

- alextanhongpin

---

display: block 对我起了作用（使用Chrome），<a>标签默认为行内元素。 - run_the_race

Answer 6

包含省略号信息之后的四行以使省略号起作用。

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

- Manoj Selvin

---

对于表格单元格，display: block; 会破坏它，因此您需要使用 max-width: 100px;。请注意，width 不起作用。不知道为什么。 - AJP

Answer 7

只需将包含该段落的div添加进去。

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

- Atul Tiwaree

Answer 8

将#User_Apps_Content .DLD_App a添加display: block;或display: inline-block;。

演示

- Bhojendra Rauniyar

---

我刚刚检查了一下，它被截断了 :/ - SearchForKnowledge

你需要使用text-overflow: ellipsis;而不是text-overflow: "..."; - undefined

Answer 9

同样，请确保在IE10及以下版本中将word-wrap设置为normal。

下面所引用的标准将此属性的行为定义为取决于“text-wrap”属性的设置。然而，在Windows Internet Explorer中，由于Internet Explorer不支持“text-wrap”属性，因此wordWrap设置始终有效。

因此，在我的情况下，word-wrap被设置为break-word（是继承的还是默认的？），导致text-overflow在Firefox和Chrome中正常工作，但在IE中却不能正常工作。

有关word-wrap属性的详细信息，请参阅ms信息。

- Tim Vermaelen

Answer 10

锚点（anchor）、span 等标签默认是 内联元素，在这种情况下，width 属性不起作用。因此，您需要将元素转换为 inline-block 或 块级元素。

- santhoshkumar