How to turn off word wrapping in HTML

Question

I feel silly for not being able to figure this out  but how do I turn off wordwrap  the css word-wrap property can be forced on with break-word  but cannot be forced off  only can be left alone with normal value    How do I force word wrap off

User · Answer

Added webkit specific values missing from above  white-space  -moz-pre-wrap     Firefox    white-space  -o-pre-wrap     Opera    white-space  pre-wrap     Chrome    word-wrap  break-word     IE

User · Answer

white-space  nowrap   Will never break text  will keep other defaults white-space  pre   Will never break text  will keep multiple spaces after one another as multiple spaces  will break if explicitly written to break pressing enter in html etc

User · Answer

I wonder why you find as solution the  white-space  with  nowrap  or  pre   it is not doing the correct behaviour  you force your text in a single line  The text should break lines  but not break words as default  This is caused by some css attributes  word-wrap  overflow-wrap  word-break  and hyphens  So you can have either    word-break  break-all  word-wrap  break-word  overflow-wrap  break-word  -webkit-hyphens  auto  -moz-hyphens  auto  -ms-hyphens  auto  hyphens  auto    So the solution is remove them  or override them with  unset  or  normal    word-break  unset  word-wrap  unset  overflow-wrap  unset  -webkit-hyphens  unset  -moz-hyphens  unset  -ms-hyphens  unset  hyphens  unset    UPDATE  i provide also proof with JSfiddle  https   jsfiddle net azozp8rr

User · Answer

If you want a HTML only solution  we can just use the pre tag  It defines  quot preformatted text quot  which means that it does not format word-wrapping  Here is a quick example to explain   x000D   x000D  div       width  200px      height  200px      padding  20px      background   adf    pre       width  200px      height  200px      padding  20px      font  inherit      background   fda    x000D   lt div gt Look at this  this text is very neat  isn t it  But it s not quite what we want  though  is it  This text shouldn t be here  It should be all the way over there  What can we do  lt  div gt   lt pre gt The pre tag has come to the rescue  Yay  However  we apologise in advance for any horizontal scrollbars that may be caused  If you need support  please raise a support ticket  lt  pre gt  x000D   x000D   x000D

User · Answer

This worked for me to stop silly work breaks from happening within Chrome textareas  word-break  keep-all

User · Answer

You need to use the CSS white-space attribute   In particular  white-space  nowrap and white-space  pre are the most commonly used values  The first one seems to be what you  re after

[html] How to turn off word wrapping in HTML?

Examples related to html

Examples related to css

Examples related to word-wrap