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

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

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

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

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

必须包含

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

绝对不能包含

display: inline

应该包含

position: sticky

包括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 >