How do I get text within <pre> tag to wrap?



  • Andrew J
    Community Moderator

    Could you just use the indent options with maybe italics?

    Can you share an image of what you are seeing?  

    I think a pre tag specifically preserves spacing and line breaks.  Manually using the pre tag is working fine for me.

  • Mollie Swenson

    Hello again Andrew, 

    No, I don't think indenting would get the look I'm going for. 

    Here's what I have now. I edited the HTML to look like this:

    And that produces this:

    The "tip" box has a scrollbar because by default, the <pre> tags do not wrap text. I know there is a way to change that, but I don't know how so I'm here asking for help with that.

    I had tried manually breaking the lines myself, but then the it looks really weird on mobile because there are random line breaks. 

    Here is what I ideally want it to look like when the lines break automatically:



  • Andrew J
    Community Moderator

    Hello Mollie,

    Try this in your css

    pre { 
    white-space: pre-wrap; /* css-3 */
    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+ */
  • Mollie Swenson

    Got it working, thank you!


Please sign in to leave a comment.

Powered by Zendesk