如果文本溢出，如何将列表保留在第一个项目的单行上以显示省略号？

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