CSS 文本溢出：省略号；不工作？

小编典典

CSS 文本溢出：省略号；不工作？

all

我不知道为什么这个简单的 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>

应该在第四次“测试”前后中断

阅读 194

2022-03-11

共1个答案

小编典典

text-overflow:ellipsis;仅在满足以下条件时才有效：

元素的宽度必须限制在px（像素）。宽度%（百分比）不起作用。
该元素必须具有overflow:hidden和white-space:nowrap设置。

您在这里遇到问题的原因是width您的a元素不受限制。您确实有一个width设置，但是由于元素设置为display:inline（即默认值）它忽略它，并且没有其他任何东西限制它的宽度。

您可以通过执行以下操作之一来解决此问题：

将元素设置为display:inline-blockor display:block（可能是前者，但取决于您的布局需要）。
将其容器元素之一设置为display:block并给该元素一个固定的width或max-width。
将元素设置为float:leftor 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>

有用的参考资料：

2022-03-11