Menu
While you can't use CSS alone to do this, you can limit the amount of characters show using CSS as Darren has suggested. You need to set your text container to white-space: no-wrap, text-overflow: ellipsis, and overflow:hidden. Then simply set the size for your container.
The best way to use is white-space: nowrap; This will align the text to one line.
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.
If you want to restrict it to one line, use white-space: nowrap; on the div.
It is possible:
element (white-space: nowrap; overflow: scroll;)
Text parsed as HTML or XML is tokenized, which means all runs of whitespace are collapsed to a single space character. This means you will have a single line of text unless you specify something in addition to the overflow declaration that could cause your text to wrap.
EDIT: I failed to include the necessary write-space: nowrap property, otherwise the default is that a container will scroll vertically opposed to horizontally.
use display block so it won't go beyond your parent element.
p#foo{
white-space: nowrap;
overflow: hidden;
display: block;
text-overflow: ellipsis;
}
p#foo {
white-space:nowrap;
overflow:hidden;
}
If you are looking to disable text wrapping, use 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