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

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

应该切断第四次“测试”

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/zh-CN/docs/Web/CSS/white-space

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

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

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

演示

您只需添加一行CSS：

.app a {
   display: inline-block;
}

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

必须包含

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

不得包含

display: inline

应该包含

position: sticky

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

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

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

overflow: hidden;
text-overflow: ellipsis;

溢出：需要隐藏

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

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

由于声誉而无法发表评论，因此我要提出另一个答案：

在这种情况下，您还必须display: block;从设置为text-overflow: ellipsis;on 的元素中删除通常建议的属性，否则它将被切断，最后没有...。

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

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