CSS文字溢出：省略号；不工作吗？

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

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

这是允许执行以下操作的代码：

overflow: hidden;
text-overflow: ellipsis;

溢出：需要隐藏

您还可以添加float：left; 在此类#User_Apps_Content .DLD_App中

必须包含

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

不得包含

display: inline

应该包含

position: sticky

我必须在响应时使一些长描述变为椭圆形（仅占用一个泳道），所以我的解决方案是让文本换行（而不是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>

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

您只需添加一行CSS：

.app a {
   display: inline-block;
}

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

演示

anchor，span...标签内联元素默认情况下，内联元素的情况下，width属性不工作。因此，您必须将元素转换为inline-block或block level元素

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

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

公认的答案很棒。但是，您仍然可以使用%width和获得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容器。因此，请使用而不是width: [YOUR PERCENT]%使用width: calc([YOUR PERCENT]%)。

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

更多详细信息，并在此工作的例子codepen由AJ福斯特。就我而言，完全可以解决问题。

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

下面引用的标准将该属性的行为定义为取决于“ text-wrap”属性的设置。但是，WordWrap设置在Windows Internet Explorer中始终有效，因为Internet Explorer不支持“文本换行”属性。

因此，以我为例，将word-wrap其设置为断字（继承或默认设置？），使其text-overflow在FF和Chrome中有效，但在IE中不起作用。

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

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/zh-CN/docs/Web/CSS/text-overflow
• https://developer.mozilla.org/en-US/docs/Web/CSS/white-space