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

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

score 1234 · Accepted Answer

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

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

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

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

将元素设置为display:inline-blockor display:block（可能是前者，但取决于您的布局需要）。
将其容器元素之一设置为display:block并给该元素一个固定的width或max-width。
将元素设置为float:leftor 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>

有用的参考资料：

score 96 · Accepted Answer

接受的答案很棒。但是，您仍然可以使用%width 和 reach 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%类似于-width 容器的东西。因此，不要使用，而是使用。800px1000pxwidth: [YOUR PERCENT]%width: calc([YOUR PERCENT]%)

score 64 · Accepted Answer

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

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

score 11 · Accepted Answer

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

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

score 8 · Accepted Answer

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

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

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

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

score 7 · Accepted Answer

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

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

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

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

score 6 · Accepted Answer

6

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

演示

于 2013-07-22T03:16:37.683 回答

score 6 · Accepted Answer

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

score 5 · Accepted Answer

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

score 3 · Accepted Answer

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

score 3 · Accepted Answer

必须包含

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

不得包含

display: inline

应该包含

position: sticky

score 2 · Accepted Answer

2

您只需添加一行 css：

.app a {
   display: inline-block;
}

于 2016-10-18T07:59:10.093 回答

score 1 · Accepted Answer

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

score 0 · Accepted Answer

我必须在响应的同时做出一些长描述椭圆（只走一条车道），所以我的解决方案是让文本换行（而不是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>

score 0 · Accepted Answer

只需添加包含该段落的 div

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

score -2 · Accepted Answer

-2

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

#User_Apps_Content .DLD_App a

于 2013-07-22T07:41:05.083 回答

score -2 · Accepted Answer

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

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

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

17 回答 17

Related

Reference