如何防止長文本打包？

-1

我正在製作一個名稱和價格的簡單菜單列表。如何防止長文本打包？

簡單的解決方案：

<ul class="list-unstyled list-menu"> 
    <li>Espresso ........................... $5</li> 
</ul>

結果：

Espresso ..................... $5

這個工作在一個「Web視圖」，但我怎麼能保持這種反應？例如，如果我調整窗口大小，容器列表將調整到較低的寬度並打破「單行」。

所以我需要避免：

Espresso ..... 
................ $5

我可以解決這個CSS和HTML只？

來源

2015-06-30 Salex

避免迴繞可能沒有真正解決問題，因爲OP後，它需要一些更多的文本。然而，我所鏈接的其他答案似乎正是OP正在嘗試做的事情。 – Harry

ul.leaders { 
 
    max-width: 40em; 
 
    padding: 0; 
 
    overflow-x: hidden; 
 
    list-style: none 
 
} 
 
ul.leaders li:before { 
 
    float: left; 
 
    width: 0; 
 
    white-space: nowrap; 
 
    content: ". . . . . . . . . . . . . . . . . . . . "". . . . . . . . . . . . . . . . . . . . "". . . . . . . . . . . . . . . . . . . . "". . . . . . . . . . . . . . . . . . . . " 
 
} 
 
ul.leaders span:first-child { 
 
    padding-right: 0.33em; 
 
    background: white 
 
} 
 
ul.leaders span + span { 
 
    float: right; 
 
    padding-left: 0.33em; 
 
    background: white 
 
}

<ul class="list-unstyled list-menu leaders"> 
 
    <li><span>Espresso</span><span>$5</span> 
 
    </li> 
 
</ul>

Fiddle demo

基礎上W3C example

來源

2015-06-30 14:03:22 isherwood

爲什麼downvote？ –

我想我應該已經注意到這是重複的。仍然... – isherwood

@isherwood：不是那個低調的人，但我看不到任何其他原因。 – Harry

如何防止長文本打包？

回答

相關問題