2

I am trying to wrap text in my pre tag in HTML and it's not working. I am using below CSS for my tag.

I got below CSS from How do I wrap text in a pre tag?

pre {
    white-space: -moz-pre-wrap; /* Mozilla, supported since 1999 */
    white-space: -pre-wrap; /* Opera */
    white-space: -o-pre-wrap; /* Opera */
    white-space: pre-wrap; /* CSS3 - Text module (Candidate Recommendation) http://www.w3.org/TR/css3-text/#white-space */
    word-wrap: break-word; /* IE 5.5+ */
    border-radius: 0 !important;
}

I have added <div class="form-group col-lg-8"> in the main div. I don't know if that matters or not.

As you can see in the below image that it's not wrapping the text properly. The 'Which' is broken into 'Whic' and 'h' into next line.

How can push the whole word on the next line?

enter image description here

Community
  • 1
  • 1
Fahad Mullaji
  • 1,332
  • 5
  • 15
  • 30

2 Answers2

0

It looks like your objective is to use monospace font along with your text, so I would set it up this way:

div .pre {
    word-wrap: normal;
    font-family: monospace;
    border-radius: 0 !important;
}

By not using any <pre> tag you save your formatting, while keeping monospace font.

Aaron Gillion
  • 2,227
  • 3
  • 19
  • 31
-1

Remove the word-wrap: break-word;

Indicates that normally unbreakable words may be broken at arbitrary points if there are no otherwise acceptable break points in the line.

https://developer.mozilla.org/en-US/docs/Web/CSS/word-wrap

iH8
  • 27,722
  • 4
  • 67
  • 76