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

【问题标题】：CSS text-overflow: ellipsis; not working?CSS 文本溢出：省略号；不工作？
【发布时间】：2013-07-20 16:46:42
【问题描述】：

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

应该在第四次“测试”前后中断

【问题讨论】：

相关stackoverflow.com/questions/802175/…
相关：Applying Ellipsis to Multiline Text
FF only - 如果应用了filter，将不会呈现省略号。 bug opened
在我的情况下，从元素中删除 display: flex 有帮助
我需要添加display: flex;。

标签： overflow ellipsis css

【解决方案1】：

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

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

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

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

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

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

这是一个带有您的代码的 sn-p，并添加了 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>

有用的参考资料：

【讨论】：

如果由于响应式设计而无法使用设置宽度怎么办？
请注意 max-width 也可以。这对我很有帮助，因为我有一个图标，无论其跨度的宽度如何，它都必须紧贴文本的末尾。（否则，如果文本没有占据 span 的全宽，图标会向右浮动）
注意：white-space: nowrap 实际上没有必要。即使没有它，我们仍然可以看到椭圆。对于多行text-overflow，请参阅this SO
不确定这是否是最近的更改，但在 Chrome 50（测试版）中，您不必将宽度设置为 px 值——“100%”也可以。 white-space: nowrap 是必需的。
您根本不需要设置固定的width。您需要做的就是设置一个white-space: nowrap;，它工作得很好。

【解决方案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% 转换为800px 之类的1000px-width 容器。因此，不要使用width: [YOUR PERCENT]%，而是使用width: calc([YOUR PERCENT]%)。

【讨论】：

【解决方案3】：

因此，如果您因为在尝试使省略号在 display: flex 容器内工作时遇到问题而遇到此问题，请尝试将 min-width: 0 添加到溢出其父容器的最外层容器中，即使您已经设置了 overflow: hidden看看它对你有什么作用。

aj-foster codepen 的更多详细信息和工作示例。在我的情况下完全成功了。

【讨论】：

很棒的解决方案 - 它也是这里发布的唯一一个适用于 position: sticky 容器中的 position: sticky 元素的解决方案。
我在 Firefox 上遇到了这个问题，Chrome 还可以。我在body 上将display 设置为grid。为了解决这个问题，我必须在网格项目上设置min-length: 0;（在我的例子中是 body 的孩子）

【解决方案4】：

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

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

【讨论】：

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

【解决方案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 属性，也可以在网络中使用省略号来多行，请参阅here。

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

【讨论】：

【解决方案6】：

同时确保word-wrap 设置为正常 IE10 及以下版本。

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

因此，在我的例子中，word-wrap 设置为 break-word（继承还是默认？）导致 text-overflow 在 FF 和 Chrome 中工作，但在 IE 中不工作。

ms info on word-wrap property

【讨论】：

【解决方案7】：

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

demo

【讨论】：

我刚刚检查过，它正在切断：/

【解决方案8】：

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

【讨论】：

【解决方案9】：

我一直遇到这个问题，我想要一个可以轻松使用动态宽度的解决方案。解决方案使用 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>

【讨论】：

@ChristopherStrydom 我认为这现在应该是公认的答案。

【解决方案10】：

在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>

【讨论】：

【解决方案11】：

必须包含

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

不得包含

display: inline

应该包含

position: sticky

【讨论】：

【解决方案12】：

你只需添加一行 css：

.app a {
   display: inline-block;
}

【讨论】：

【解决方案13】：

还请确保直接封闭元素具有固定宽度，并且您要应用省略号的跨度具有display:block

【讨论】：

【解决方案14】：

我必须在响应时制作一些长描述椭圆（只走一条车道），所以我的解决方案是让文本换行（而不是white-space: nowrap），而不是固定宽度，我添加了固定高度：

span {
  display: inline-block;
  line-height: 1rem;
  height: 1rem;
  overflow: hidden;
  // OPTIONAL LINES
  width: 75%;
  background: green;
  //  white-space: normal; default
}

<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>

【讨论】：

【解决方案15】：

只需添加包含该段落的 div

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

【讨论】：

【解决方案16】：

将这些写在你的 CSS 规则中。

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

【讨论】：

这个你也可以看看，jsfiddle.net/ManiAnand/5v6pfy9w
如果可以指定宽度不会让我的回答出错。所有你刚刚在我的答案中添加显示块，我写了一个sn-p，而不是整个代码，所以可以添加其他东西但与问题无关！你能具体说明我的答案是不正确的吗？
宽度和显示都需要指定。如果宽度为百分比或未指定且未设置为硬单位，则溢出将不受限制且不起作用。查看接受的答案。
宽度已由操作设置。我给了 sn-p 添加他的代码

【解决方案17】：

您也可以在此选择器中添加float:left;：

#User_Apps_Content .DLD_App a

【讨论】：