Menu
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?
741
You can prevent text from wrapping with a . text-nowrap class. This text should overflow the parent.
If you want to prevent the text from wrapping, you can apply white-space: nowrap; Notice in HTML code example at the top of this article, there are actually two line breaks, one before the line of text and one after, which allow the text to be on its own line (in the code).
Prevent long strings of text from breaking your components' layout by using . text-break to set word-wrap: break-word and word-break: break-word . We use word-wrap instead of the more common overflow-wrap for wider browser support, and add the deprecated word-break: break-word to avoid issues with flex containers.
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.
181
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
