text-overflow:ellipsis;仅在满足以下条件时起作用：
- 元素的宽度必须限制为
px
（像素）。宽度%
（百分比）无效。 - 元素必须具有
overflow:hidden
并white-space:nowrap
设置。
您在这里遇到问题的原因是因为
width您的
a元素的不受限制。您确实有一个
width设置，但是因为该元素设置为
display:inline（即默认值），所以它忽略了它，并且也没有其他任何约束其宽度的方法。
您可以通过执行以下任一操作来解决此问题：
- 将元素设置为
display:inline-block
或display:block
（可能是前者，但取决于您的布局需求）。 - 将其容器元素之一设置为，
display:block
并为其赋予一个固定值width
或max-width
。 - 将元素设置为
float:left
或float:right
（可能是前者，但同样，就省略号而言，两者应具有相同的效果）。
我建议
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 > <a href="">Test Test Test Test Test Test</a></div>
