在Chrome和Safari的下一行上的列表项目中，与Text-Overflow Ellipsis链接

Question

我有一个非常基本的链接（'a''元素），eLLIPSIS溢出在列表中：

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

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

这将导致Google Chrome in：

*
  test

在Firefox中，这将导致：

* test

我想要后者。但是，为什么Google和Safari无法正确渲染此操作以及如何解决此问题？

Answer 1

您可以通过在<a>元素上使用display:inline-block来解决此问题：

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>