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

Answered

7 Comments

  • 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.

    0
  • 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:

     

     

    0
  • 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+ */
    }
    0
  • Mollie Swenson

    Got it working, thank you!

    0
  • Stephen A Kairys

    Hi,

    I'm having the same problem as Mollie. In this case, it's raw HTML code that needs to wrap. Regarding the previous comment per adding the below to 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 */

    1) Why don't I see mention of Chrome, Edge, Firefox, etc. ?

    2) Is there a missing } at the end of the code block?

    3) Would the CSS apply to this article only, or the entire Guide Knowledge Base. I'm a bit skittish about making a change that could effect numerous articles.

    4) Please point me in the right direction to an article that will tell me how to update our CSS. I'm an admin, so I should have access.

    5) If I don't want to deal with the mechanics of code blocks, can I have Zendesk render the same font some other way?

    Thanks,

    Stephen

    0
  • Andrew J
    Community Moderator

    You could use on-line styles to avoid making this global. You'll want to look up articles on editing your theme. This requires a paid guide plan I believe.

    0
  • Stephen A Kairys

    Thank you. Pleas see above: why is Chrome not listed in the specified browsers?

    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 */
    0

Please sign in to leave a comment.

Powered by Zendesk