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

Respondida

4 Comentários

  • Andrew J
    Ações de comentário Permalink

    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.

    0
  • Mollie Swenson
    Ações de comentário Permalink

    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:

     

     

    0
  • Andrew J
    Ações de comentário Permalink

    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+ */
    }
    0
  • Mollie Swenson
    Ações de comentário Permalink

    Got it working, thank you!

    0

Por favor, entrar para comentar.

Desenvolvido por Zendesk