I have maybe a little bit strange task, but I belive there is no better solution. I need to have <ul>
in some container which width is changeable and with inlined <li>
elements of fixed width. I should (and already found solution) put spaces between <li>
elems of same width. Width of spaces is changes dynamicaly and depends of parental container width. Again, this <li>
items have fixed width.
I also should place some links above this described elements. For some reasons links must be in other <ul>
element. They also wrapped in inlined <li>
elems. And I want them to be positioned right above described <li>
items. This can be done by setting fixed width of <li>
items as above. Now, the problem is that text in every link is actualy have different width and will break into two lines, but I must place it into one line.
So I want to trick browser: text will be overflowing <li>
items.
.liElem {
width: 100px;
height: 20px;
overflow: visible;
}
But, as you may guess, text is breaking into two lines and overflowing actually the bottom of list items, not the right side.
The effect I wanted can be done by inserting
insted of spaces in text like this: <li><a href="#">Add to Favourites</a></li>
.
So, my question is this: how in css-way make usual text NOT to break into several lines ?
Use white-space: nowrap; or give that link more space by setting li 's width to greater values. I prevented line break in li items using display: inline; . Maybe this will also help others with similar problems. Its important to be careful with display: inline as it can have side effects.
If you want to limit the text length to one line, you can clip the line, display an ellipsis or a custom string. All these can be done with the CSS text-overflow property, which determines how the overflowed content must be signalled to the user.
use white-space: nowrap; . If you have set width on the element on which you are setting this it should work. It's white-space: nowrap actually.
The <nobr> HTML element prevents the text it contains from automatically wrapping across multiple lines, potentially resulting in the user having to scroll horizontally to see the entire width of the text.
.nobr { white-space:nowrap; }
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