Как предотвратить перенос длинного текста?

Question

Я делаю простой список меню с именем и ценой.

Простое решение:

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

Результаты:

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

Это работает в одном "для веб-сайтов", но как я могу держать это реагировать? Например, если я изменил размер окна, список контейнеров будет изменяться до меньшей ширины и сломать «один лайнер».

Так что мне нужно, чтобы предотвратить:

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

Могу ли я решить эту проблему с помощью CSS и HTML только?

Answer 1

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