你只需要添加一行css:

.app a {
   display: inline-block;
}

我一直有这个问题，我想要一个解决方案，可以很容易地与动态宽度工作。解决方案使用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 >

在引导程序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 >

对于我来说，我没有在内部div中设置它，而是在外部div中设置它，所以即使我有nowrap, overflow:hidden，和设置宽度，它也不起作用。代码如下:

<div className="outer">
  <ToolTip>
    <div className="inner"> long content needing to be cut
    </div>
  </ToolTip>
</div>

锚,跨度…标签默认是内联元素，如果内联元素宽度属性不起作用。因此，您必须将元素转换为内联块或块级元素

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