css - 如果文本溢出，如何将列表与第一个元素保持在一行中以显示省略号？

Question

我有一个元素列表:

• 用户名
• 登录
• 注册

显示在一行中。示例:

->     John Doe  Login  Sign Up <-

在显示较窄的浏览器上，用户名可能过长，导致换行。如果文本导致换行，我希望压缩用户名而不是中断，显示省略号。示例:

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

如何使用 CSS 实现这一点？

jsFiddle Here

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 Fiddle demo .