包括info后面写的四行，以便省略号起作用

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

在引导程序4中，可以添加.text-truncate类来用省略号截断文本。

< script src = " https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js " > < /脚本> <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 " > < /脚本> <！——内联级别——> <span class=" font - family:宋体" style=" font - family:宋体;"> 敏捷的棕色狐狸跳过了懒惰的狗。 < / span >

我一直有这个问题，我想要一个解决方案，可以很容易地与动态宽度工作。解决方案使用css网格。 下面是代码的样子:

.parent { 显示:网格; Grid-template-columns: auto 1fr; ｝ .dynamic-width-child { 空白:nowrap;} 文本溢出:省略; 溢出:隐藏; ｝ .fixed-width-child { 空白:nowrap;} ｝ < div class = "父" > < div class = " dynamic-width-child”> iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii asdfhlhlafh; lshd flhsd; lhfaaaaaaaaaaaaaaaaaaaa < / div > < div class = " fixed-width-child”>为什么?zed < / div > < / div >

只需添加包含该段落的div即可

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

文本溢出:省略;只有在以下情况下才有效:

元素的宽度必须限制在px(像素)。宽度在%(百分比)将不起作用。 元素必须有overflow:hidden和white-space:nowrap设置。

这里出现问题的原因是a元素的宽度没有限制。你确实有一个宽度设置，但因为元素被设置为display:inline(即默认值)，它会忽略它，也没有其他任何东西限制它的宽度。

你可以通过以下方法之一来解决这个问题:

将元素设置为display:inline-block或display:block(可能是前者，但取决于你的布局需要)。 将其中一个容器元素设置为display:block，并为该元素设置固定宽度或max-width。 将元素设置为float:left或float:right(可能是前者，但同样，就省略号而言，两者都应该具有相同的效果)。

我建议display:inline-block，因为这将对你的布局产生最小的附带影响;它的工作原理非常像显示:内联，它目前正在使用的布局，但也可以自由地尝试其他点;我已经尽可能多地提供信息来帮助你们理解这些东西是如何相互作用的;理解CSS的很大一部分是关于理解各种样式如何一起工作。

下面是您的代码片段，并添加了一个display:inline-block，以显示您有多接近。

.app a { 高度:18 px; 宽度:140 px; 填充:0; 溢出:隐藏; 位置:相对; 显示:inline-block; Margin: 0 5px 0 5px; text-align:中心; 文字修饰:没有; 文本溢出:省略; 空白:nowrap;} 颜色:# 000; ｝ < div class = "应用" > <a href="">Test 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

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