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>