How to stop text from taking up more than 1 line

Question

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

User · Accepted Answer

x000D   x000D  div   x000D    white-space  nowrap  x000D    overflow  hidden  x000D    x000D   lt div gt test that doesn t wrap lt  div gt  x000D   x000D   x000D    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

User · Answer

Sometimes using  amp nbsp  instead of spaces will work  Clearly it has drawbacks  though

User · Answer

You can use CSS white-space Property to achieve this   white-space  nowrap

User · Answer

Just to be crystal clear  this works nicely with paragraphs and headers etc  You just need to specify display  block   For instance    lt h5 style  display  block  text-overflow  ellipsis  white-space  nowrap  overflow  hidden  gt    This is a really long title  but it won t exceed the parent width  lt  h5 gt     forgive the inline styles

User · Answer

Using ellipsis will add the     at the last       lt style type  text css  gt      div         white-space  nowrap        overflow  hidden  text-overflow  ellipsis             lt  style gt

User · Answer

In JSX  React prevent text from wrapping  lt div style    whiteSpace   quot nowrap quot   overflow   quot hidden quot     gt     Text that will never wrap  lt  div gt

[html] How to stop text from taking up more than 1 line?

Examples related to html

Examples related to css

Examples related to text

Examples related to word-wrap