我不知道为什么这个简单的 CSS 不起作用......
.app a {
height: 18px;
width: 140px;
padding: 0;
overflow: hidden;
position: relative;
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>
应该在第四次“测试”左右切断
text-overflow:ellipsis;仅当满足以下条件时才有效：
- 元素的宽度必须限制在
px（像素）。宽度为%（百分比）不起作用。
- 该元素必须具有
overflow:hidden and white-space:nowrap set.
你在这里遇到问题的原因是因为width你的a元素不受约束。你确实有一个width设置，但因为该元素设置为display:inline（即默认值）它忽略它，并且没有其他东西限制它的宽度。
您可以通过执行以下操作之一来修复此问题：
- 将元素设置为
display:inline-block or display:block（可能是前者，但取决于您的布局需求）。
- 将其容器元素之一设置为
display:block并给该元素一个固定的width or max-width.
- 将元素设置为
float:left or 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 class="app">
<a href="">Test Test Test Test Test Test</a>
</div>
有用的参考：
- https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow
- https://developer.mozilla.org/en-US/docs/Web/CSS/white-space https://developer.mozilla.org/en-US/docs/Web/CSS/white-space
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
