Is there a word-wrap or any other attribute that stops text from wrapping? I have a height, and overflow:hidden
, and the text still breaks.
Needs to work in all browsers, before CSS3.
Is there a word-wrap or any other attribute that stops text from wrapping? I have a height, and overflow:hidden
, and the text still breaks.
Needs to work in all browsers, before CSS3.
div {
white-space: nowrap;
overflow: hidden;
}
<div>test that doesn't wrap</div>
Note: this only works on block elements. If you need to do this to table cells (for example) you need to put a div inside the table cell as table cells have display table-cell not block.
As of CSS3, this is supported for table cells as well.
You can use CSS white-space Property
to achieve this.
white-space: nowrap
Using ellipsis will add the ... at the last.
<style type="text/css">
div {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
Sometimes using
instead of spaces will work. Clearly it has drawbacks, though.