Menu
My CSS designer has made a design where there are two ul siblings laid out left to right. The layout is done by specifying the width of the ul tags.
He is using Firefox on Windows where everything looks fine. I am using Firefox on OS X where the contents of one of the li tags has too much text so it flows to another line. The design was made with the intention that the text is on one line.
There are a couple considerations to make:
ul tags to go left to right, not top to bottomIf this is defined in pixels why does it appear differently in OS X compared to Windows even in the same browser?
Is there a general CSS solution that can prevent wrapping lines or prevent the page from looking different in respect to line wrapping between OS X and Windows? Or is this a lost cause?
244
As a result, the elements can sit next to each other. The major difference between display: inline; and display: inline-block; is that, display: inline-block; also allows us to set the width and height of the element. We can prevent inline-block divs from wrapping by adding suitable Bootstrap classes.
The word-break property in CSS is used to specify how a word should be broken or split when reaching the end of a line. The word-wrap property is used to split/break long words and wrap them into the next line. word-break: break-all; It is used to break the words at any character to prevent overflow.
The secret code To force a web browser to treat 2 separate words as if they were 1, use the code instead of a space, like so: These two words are like one.
Setting white-space: nowrap on the uls will prevent the text from wrapping, ever, until a <br /> is found. As much as I understand, the lists are already horizontal, but for completeness' sake, you can do it by making the li elements display: inline or display: inline-block. The white-space: nowrap will not work for floated list items.
References:
182
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
