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

Question

我有一个项目清单：

• 用户名
• 登录
• 报名

显示在单行上。例子：

->     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 小提琴演示。