你也可以添加float:left;在这个选择器内部:

#User_Apps_Content .DLD_App a

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

关于这个代码的更多细节和工作示例由aj-foster编写。对我来说完全管用。

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

添加显示:块;或显示:inline-block;#User_Apps_Content .DLD_App

demo

我也遇到过同样的问题，似乎上面的解决方案都不适用于Safari。对于非safari浏览器，这工作得很好:

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

对于Safari，这是适合我的。注意，用于检查浏览器是否是Safari的media查询可能会随着时间的推移而改变，所以如果它不适合您，只需修补一下media查询即可。有了线夹特性，也可以在有省略号的网中有多条线，见这里。

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

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