Sorry for the confusing title but I did not know how to ask this.
Basically I have a title of a drink and the quantity of the drink next to it like so.
Orange Juice ( 20 LT )
Im really using PHP to output the information but this is the code that would make that happen:
<h6><?php the_title(); ?> <span> ( <?php the_field('quantity'); ?> )</span></h6>
I tried using the html space code but did not seem to work
So the problem is when the screen is to small and there isn't enough space the quantity ( 20 LT ) will go on to the next line but NOT the entire quantity just a part like so:
Orange Juice ( 20
LT )
how can I make it so that if there is not enough space to output the quantity bring the entire quantity down to the next line and not just part of it.
Meaning if there weren't enough space it would look like this:
Orange Juice
( 20 LT )
and not only bring a part of quantity down but the whole thing.
Try to add display: inline-block to the span, like this:
<h6><?php the_title(); ?> <span style="display: inline-block;"> ( <?php the_field('quantity'); ?> )</span></h6>