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

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

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

我遇到了同样的问题，似乎上述解决方案都不适用于 Safari。对于非 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;
  }
}

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

demo

还要确保 IE10 及更低版本的 word-wrap 设置为 normal。

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

因此，在我的例子中，word-wrap 设置为 break-word（继承还是默认？）导致 text-overflow 在 FF 和 Chrome 中工作，但在 IE 中不起作用。

ms info on word-wrap property

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

在 bootstrap 4 中，您可以添加一个 .text-truncate 类来截断带有省略号的文本。

快棕色狐狸跳过懒狗。

必须包含

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

不得包含

display: inline

应该包含

position: sticky

您只需添加一行 css：

.app a {
   display: inline-block;
}

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

只需添加包含该段落的 div

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

我必须在响应时制作一些长描述椭圆（只走一条车道），所以我的解决方案是让文本换行（而不是 white-space: nowrap），而不是固定宽度，我添加了固定高度：

跨度{显示：内联块；线高：1rem；高度：1rem；溢出：隐藏； // 可选线宽度：75%；背景：绿色； // 空白：正常；默认 } Lorem ipsum dolor sit amet, consectetur adipisicing elit。 Commodi quia quod reprehenderit saepe 坐。 Animi deleniti distinctio dolorum iste molestias reiciendis saepe。 Ea eius ex, ipsam iusto laudantium natus obcaecati quas rem repellat temporibus！别名 atque deserunt dignissimos dolor earum、eligendi eveniet exercitationem natus non、odit sint sat 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

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

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

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

#User_Apps_Content .DLD_App a