How can I prevent long text from wrapping?

Question

I am making a simple menu list with a name and a price.

The simple solution:

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

Results:

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

This works in one "web view", but how can I keep this responsive? For example If I resize window, the container list is in will resize to a lower width and break the "one liner".

So I need to prevent:

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

Can I solve this with CSS and HTML only?

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