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

公认的答案很棒。但是，您仍然可以使用%宽度并获得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: [YOUR PERCENT]%，而要使用width: calc([YOUR PERCENT]%)。

Answer 3

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

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

因此在我的情况下，word-wrap被设置为 break-word （继承或默认情况下？），导致text-overflow在FF和Chrome中运行，但不在IE中

ms info on word-wrap property

Answer 4

anchor，span ...标签默认为 内嵌元素 ，如果内联元素width属性不存在不行。因此，您必须将元素转换为inline-block或block level元素

Answer 5

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

.app a {
        height: 18px;
        width: 140px;
        padding: 0;
        position: relative;
        margin: 0 5px 0 5px;
        font: bold 15px/18px Arial;
        text-align: center;
        text-decoration: none;
        color: #FFF;

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

你只需添加一行css：

.app a {
   display: inline-block;
}

Answer 7

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

demo

Answer 8

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

Answer 9

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

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

.

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

Answer 10

https://stackoverflow.com/a/53784508/5626747

由于声誉而无法发表评论，所以我要回答另一个问题：

在这种情况下，您还必须从将display: block;设置为打开的元素中删除通常建议的text-overflow: ellipsis;属性，否则该属性将被切掉，且结尾没有...。

Answer 11

因此，如果由于无法使省略号在display: flex容器中工作而遇到问题，请尝试将min-width: 0添加到溢出其父容器的最外面的容器中，即使您已经设置了overflow: hidden并查看它如何为您工作。

codepen对此aj-foster的更多详细信息和工作示例。就我而言，完全可以解决问题。

Answer 12

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

Answer 13

只需在包含该段落的 div 中添加“white-space: nowrap” " 宽度: 50px; " “溢出：隐藏；” “文本溢出：省略号；” “边框：1px 实心 #000000;”

Answer 14

必须包含

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

不得包含

display: inline

应该包含

position: sticky

Answer 15

在响应时，我不得不做出一些长的椭圆描述（仅占用一个车道），所以我的解决方案是让文本换行（而不是white-space: nowrap），而不是固定宽度，而是增加了固定高度：< / p>

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>

Answer 16

您还可以添加float：left;在这个类里面#User_Apps_Content .DLD_App a

Answer 17

  

将这些内容写入您的css规则。

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