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

Question

我有一个非常基本的链接（＆＃39; a＆＃39;元素），在列表项中有省略号溢出：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

这会导致Google Chrome浏览器：

*
  test

在Firefox中，这会导致：

* test

我想要后者。但是为什么谷歌和Safari无法正确呈现这个以及如何解决这个问题？

Answer 1

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;