522

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

17 回答 17

1234

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

  • 元素的宽度必须限制在px(像素)。宽度%(百分比)不起作用。
  • 该元素必须具有overflow:hiddenwhite-space:nowrap设置。

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

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

  • 将元素设置为display:inline-blockor display:block(可能是前者,但取决于您的布局需要)。
  • 将其容器元素之一设置为display:block并给该元素一个固定的widthmax-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>

有用的参考资料:

于 2013-07-22T08:46:17.220 回答
96

接受的答案很棒。但是,您仍然可以使用%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]%)

于 2018-10-24T20:15:31.747 回答
64

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

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

于 2018-12-14T17:40:43.473 回答
11

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

.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;
}
于 2017-10-06T12:27:48.747 回答
8

我遇到了同样的问题,似乎上述解决方案都不适用于 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;
  }
}
于 2020-04-30T03:47:25.397 回答
7

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

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

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

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

于 2015-01-06T10:22:29.213 回答
6

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

演示

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

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

于 2015-10-20T06:43:44.213 回答
5

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

于 2021-02-23T08:53:26.237 回答
3

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>

于 2018-09-06T02:23:17.180 回答
3

必须包含

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

不得包含

display: inline

应该包含

position: sticky
于 2019-05-29T23:44:31.077 回答
2

您只需添加一行 css:

.app a {
   display: inline-block;
}
于 2016-10-18T07:59:10.093 回答
1

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

于 2021-08-17T09:23:38.423 回答
0

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

于 2018-12-04T05:24:09.167 回答
0

只需添加包含该段落的 div

white-space: nowrap 
width: 50px; 
overflow: hidden;
text-overflow: ellipsis; 
border: 1px solid #000000;
于 2021-07-14T18:08:15.300 回答
-2

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

#User_Apps_Content .DLD_App a
于 2013-07-22T07:41:05.083 回答
-2

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

display: block; /* or in-line block according to your requirement */
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
于 2018-06-11T21:04:18.340 回答