css - テキストがオーバーフローした場合に省略記号を表示する最初の項目でリストを 1 行に保持する方法は?

Question

アイテムのリストがあります：

• ユーザー名
• ログイン
• サインアップ

1行で表示されます。例：

->     John Doe  Login  Sign Up <-

表示が狭いブラウザでは、ユーザー名が長すぎて改行する場合があります。改行の代わりに、ユーザー名を圧縮して省略記号を表示し、テキストで改行が発生するようにします。例：

-> Benjamin F... Login  Sign Up <-

これをCSSでどのように行うことができますか?

ここでjsFiddle

Answer 1

widthまたはmax-width(単独でまたは一緒に)を使用します。

ul {
    white-space: nowrap; /* forces single-line display */
}

li {
    /* existing CSS in which I assume you've defined widths and such */
    float: left;
    width: 5em;
}

li:first-child {
    max-width: 6em;
    overflow: hidden; /* for browsers that don't support the next rule */
    text-overflow: ellipsis;
}

JS フィドルのデモ。