text-overflow:ellipsis; 仅在满足以下条件时起作用：
您在这里遇到问题的原因是因为width您的a元素的不受限制。您确实有一个width设置，但是因为该元素设置为display:inline（即默认值），所以它忽略了它，并且也没有其他任何约束其宽度的方法。
您可以通过执行以下任一操作来解决此问题：
我建议display:inline- block，因为这将对您的布局产生最小的附带影响；就display:inline布局而言，它的工作方式与当前使用的非常相似，但也可以随意尝试其他方面。我试图提供尽可能多的信息，以帮助您了解这些事物如何相互作用。理解CSS的很大一部分是关于理解各种样式如何协同工作的。
这是您的代码的片段，带有display:inline-block添加的代码，以显示您的距离。
.app a {
height: 18px;
width: 140px;
padding: 0;
overflow: hidden;
position: relative;
display: inline-block;
margin: 0 5px 0 5px;
text-align: center;
text-decoration: none;
text-overflow: ellipsis;
white-space: Nowrap;
color: #000;
}
<div class="app">
<a href="">Test Test Test Test Test Test</a>
</div>
602392714
清零编程群