html - 在 Chrome 和 Safari 的下一行列表项中使用文本溢出省略号链接

Question

我有一个非常基本的链接('a' 元素)，在列表项中有省略号溢出:

a {
  display: block; 
  width: 100%; 
  white-space: nowrap; 
  overflow: hidden; 
  text-overflow: ellipsis;
}

<ul>
  <li><a href="#">test</a>
  </li>
</ul>

这会导致 Google Chrome:

*
  test

在 Firefox 中，这导致:

* test

我想要后者。但为什么 Google 和 Safari 无法正确呈现此问题以及如何解决此问题？

Answer 1

您可以使用 display:inline-block 修复此问题在 <a> 上元素:

a {
  display:inline-block; 
  width: 100%; 
  white-space: nowrap; 
  overflow: hidden; 
  text-overflow: ellipsis;
  vertical-align: top;
}

<ul>
  <li><a href="#">test</a></li>
</ul>