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/