div {_x000D_
white-space: nowrap;_x000D_
overflow: hidden;_x000D_
}<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.
Using ellipsis will add the ... at the last.
<style type="text/css">
div {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
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)
Sometimes using instead of spaces will work. Clearly it has drawbacks, though.
You can use CSS white-space Property to achieve this.
white-space: nowrap
In JSX/ React prevent text from wrapping
<div style={{ whiteSpace: "nowrap", overflow: "hidden" }}>
Text that will never wrap
</div>
Source: Stackoverflow.com