How do I wrap text in a pre tag

Question

pre tags are super-useful for code blocks in HTML and for debugging output while writing scripts  but how do I make the text word-wrap instead of printing out one long line

User · Accepted Answer

The answer  from this page in CSS   pre       white-space  pre-wrap           Since CSS 2 1        white-space  -moz-pre-wrap      Mozilla  since 1999        white-space  -pre-wrap          Opera 4-6        white-space  -o-pre-wrap        Opera 7        word-wrap  break-word           Internet Explorer 5 5

User · Answer

The Best Cross Browser Way worked for me to get line breaks and shows exact code or text   chrome  internet explorer  Firefox   CSS   xmp  white-space pre-wrap  word-wrap break-word      HTML    lt xmp gt  your text or code  lt  xmp gt

User · Answer

You can either   pre   white-space  normal      to maintain the monospace font but add word-wrap  or   pre   overflow  auto      which will allow a fixed size with horizontal scrolling for long lines

User · Answer

Use white-space  pre-wrap and some prefixes for automatic line breaking inside pres   Do not use word-wrap  break-word because this just  of course  breaks a word in half which is probably something you do not want

User · Answer

This is what I needed  It kept words from breaking but allowed for dynamic width in the pre area   word-break  keep-all

User · Answer

Most succinctly  this forces content to wrap inside of a  quot pre quot  tag without breaking words  Cheers  pre     white-space  pre-wrap    word-break  keep-all

User · Answer

Try using    lt pre style  white-space normal   gt      Or better throw CSS

User · Answer

This is what I needed  It kept words from breaking but allowed for dynamic width in the pre area   word-break  keep-all

User · Answer

You can either   pre   white-space  normal      to maintain the monospace font but add word-wrap  or   pre   overflow  auto      which will allow a fixed size with horizontal scrolling for long lines

User · Answer

Use white-space  pre-wrap and some prefixes for automatic line breaking inside pres   Do not use word-wrap  break-word because this just  of course  breaks a word in half which is probably something you do not want

User · Answer

The  lt pre gt -Element stands for  pre-formatted-text  and is intended to keep the formatting of the text  or whatever  between its tags  Therefore it is actually not inteded to have automatic word-wrapping or line-breaks within the  lt pre gt -Tag     Text in a  element is displayed in a fixed-width font  usually Courier   and it preserves both spaces and line breaks    source  w3schools com  emphasises made by myself

User · Answer

You can either   pre   white-space  normal      to maintain the monospace font but add word-wrap  or   pre   overflow  auto      which will allow a fixed size with horizontal scrolling for long lines

User · Answer

Most succinctly  this forces content to wrap inside of a  quot pre quot  tag without breaking words  Cheers  pre     white-space  pre-wrap    word-break  keep-all

User · Answer

This works great to wrap text and maintain white-space within the pre-tag   pre       white-space  pre-wrap

User · Answer

I suggest forget the pre and just put it in a textarea   Your indenting will remain and your code wont get word-wrapped in the middle of a path or something    Easier to select text range in a text area too if you want to copy to clipboard   The following is a php excerpt so if your not in php then the way you pack the html special chars will vary    lt textarea style  font-family monospace   onfocus  copyClipboard this    gt  lt   htmlspecialchars  codeBlock    gt  lt  textarea gt    For info on how to copy text to the clipboard in js see  How do I copy to the clipboard in JavaScript     However     I just inspected the stackoverflow code blocks and they wrap in a  lt code gt  tag wrapped in  lt pre gt  tag with css      code     background-color   EEEEEE    font-family  Consolas Menlo Monaco Lucida Console Liberation Mono DejaVu Sans Mono Bitstream Vera Sans Mono Courier New monospace serif    pre     background-color   EEEEEE    font-family  Consolas Menlo Monaco Lucida Console Liberation Mono DejaVu Sans Mono Bitstream Vera Sans Mono Courier New monospace serif    margin-bottom  10px    max-height  600px    overflow  auto    padding  5px    width  auto      Also the content of the stackoverflow code blocks is syntax highlighted using  I think  http   code google com p google-code-prettify     Its a nice setup but Im just going with textareas for now

User · Answer

I ve found that skipping the pre tag and using white-space  pre-wrap on a div is a better solution     lt div style  white-space  pre-wrap   gt content lt  div gt

User · Answer

Try using    lt pre style  white-space normal   gt      Or better throw CSS

User · Answer

I ve found that skipping the pre tag and using white-space  pre-wrap on a div is a better solution     lt div style  white-space  pre-wrap   gt content lt  div gt

User · Answer

I suggest forget the pre and just put it in a textarea   Your indenting will remain and your code wont get word-wrapped in the middle of a path or something    Easier to select text range in a text area too if you want to copy to clipboard   The following is a php excerpt so if your not in php then the way you pack the html special chars will vary    lt textarea style  font-family monospace   onfocus  copyClipboard this    gt  lt   htmlspecialchars  codeBlock    gt  lt  textarea gt    For info on how to copy text to the clipboard in js see  How do I copy to the clipboard in JavaScript     However     I just inspected the stackoverflow code blocks and they wrap in a  lt code gt  tag wrapped in  lt pre gt  tag with css      code     background-color   EEEEEE    font-family  Consolas Menlo Monaco Lucida Console Liberation Mono DejaVu Sans Mono Bitstream Vera Sans Mono Courier New monospace serif    pre     background-color   EEEEEE    font-family  Consolas Menlo Monaco Lucida Console Liberation Mono DejaVu Sans Mono Bitstream Vera Sans Mono Courier New monospace serif    margin-bottom  10px    max-height  600px    overflow  auto    padding  5px    width  auto      Also the content of the stackoverflow code blocks is syntax highlighted using  I think  http   code google com p google-code-prettify     Its a nice setup but Im just going with textareas for now

User · Answer

The  lt pre gt -Element stands for  pre-formatted-text  and is intended to keep the formatting of the text  or whatever  between its tags  Therefore it is actually not inteded to have automatic word-wrapping or line-breaks within the  lt pre gt -Tag     Text in a  element is displayed in a fixed-width font  usually Courier   and it preserves both spaces and line breaks    source  w3schools com  emphasises made by myself

User · Answer

The following helped me   pre       white-space  normal      word-wrap  break-word      Thanks

User · Answer

The following helped me   pre       white-space  normal      word-wrap  break-word      Thanks

User · Answer

Try using    lt pre style  white-space normal   gt      Or better throw CSS

User · Answer

You can either   pre   white-space  normal      to maintain the monospace font but add word-wrap  or   pre   overflow  auto      which will allow a fixed size with horizontal scrolling for long lines

User · Answer

Try using    lt pre style  white-space normal   gt      Or better throw CSS

User · Answer

The Best Cross Browser Way worked for me to get line breaks and shows exact code or text   chrome  internet explorer  Firefox   CSS   xmp  white-space pre-wrap  word-wrap break-word      HTML    lt xmp gt  your text or code  lt  xmp gt

User · Answer

I combined  richelectron and  user1433454 answers   It works very well and preserves the text formatting     lt pre  style  white-space  pre-wrap  word-break  keep-all   gt    lt  pre gt

User · Answer

This works great to wrap text and maintain white-space within the pre-tag   pre       white-space  pre-wrap

User · Answer

I combined  richelectron and  user1433454 answers   It works very well and preserves the text formatting     lt pre  style  white-space  pre-wrap  word-break  keep-all   gt    lt  pre gt

[html] How do I wrap text in a pre tag?

Examples related to html

Examples related to css