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.
Join Stack Overflow to learn, share knowledge, and build your career.
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.
p.oneline { white-space:nowrap; overflow:hidden; display:block;}
– Alex Angelico
May 11 '17 at 13:33
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.
Just to be crystal clear, this works nicely with paragraphs and headers etc. You just need to specify display: block
.
For instance:
<h5 style="display: block; text-overflow: ellipsis; white-space: nowrap; overflow: hidden">
This is a really long title, but it won't exceed the parent width
</h5>
(forgive the inline styles)
In JSX/ React prevent text from wrapping
<div style={{ whiteSpace: "nowrap", overflow: "hidden" }}>
Text that will never wrap
</div>