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?

Avoiding wrap around might not actually solve the issue because OP needs some more text after it. However, the other answer I had linked seems to be exactly what the OP is trying to do. — Harry, Jun 30 '15 at 14:04

score 2 · Answer 1 · answered Jun 30 '15 at 14:03

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

Based on the W3C example

I supposed I should've noticed that this was a duplicate. Still.... — isherwood, Jun 30 '15 at 14:06
@isherwood: Not the one who downvoted but I can't see any other reason. — Harry, Jun 30 '15 at 14:08

How can I prevent long text from wrapping?

1 Answers1