html - 修复列表项的宽度并隐藏溢出的文本

Question

我有一个包含单个项目的列表，我想将列表项的宽度固定为 200 像素，如果文本链接超出 200 像素的宽度，则用“...”截断。

有什么想法我可以如何去做吗？

<ul>
  <li>
    <a href="account.asp">Super long string</a>
  </li>
</ul>

Answer 1

ul li {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 200px;
}

Answer 2

使用这个 CSS：

ul li {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 200px;
}

这个css风格是关键：

text-overflow: ellipsis;

在这里玩它：http ://www.w3schools.com/cssref/tryit.asp?filename=trycss3_text-overflow

在这里测试：http: //jsfiddle.net/xXM2z/