72

I have a viewer with a control bar consisting of divs in a row. The other items have the FA icon already over the text for it so there is no issue with screen size but in order to differentiate two of the buttons that have higher level control to switch the content in the viewer. They are laid out as shown below:

<i class="fa fa-toggle-right lg"></i> <span style="font-size:18px;">Next

When this is shown on a small screen like an iPhone, the icon moves over the text and I'd like it to stay next to it instead. The reason being that the other button then lines up with the icon below it which is bad looking UI.

Previous<i class="fa fa-toggle-left lg"></i>

Any options as to how to keep them from wrapping?

WhyEnBe
  • 295
  • 7
  • 22
kylebellamy
  • 993
  • 3
  • 10
  • 19
  • One thought I has was to include an invisible character in there that the browser would read as part of a word. So for instance, using ^ as the pretend symbol, it would be: ^Next – kylebellamy Jan 16 '15 at 14:47

1 Answers1

156

Surround it with a <span class="text-nowrap">. The class .text-nowrap is one of Bootstrap's text alignment helper classes and consists of:

.text-nowrap {
    white-space: nowrap;
}

which makes the icon and text stay on the same line.

ckuijjer
  • 13,293
  • 3
  • 40
  • 45
  • I hadn't noticed that bootstrap class myself either. I added it to the class tag of my html table and as I hoped all the cells no longer wrapped to a second line. – dading84 May 13 '17 at 13:58
  • It doesn't wrap but it also truncates the text. I am looking for a way to accommodate the text within the div with no wrapping. – Paulo Pedroso Apr 03 '19 at 12:58