如何使用第一項在單行上保留列表以顯示省略號如果文本溢出？

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。