How to Wrap Text in a Pre Tag

How do I wrap text in a pre tag?

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+ */
}

Text inside pre tag is not wrapping

Use like below,

pre {
    outline: 1px solid #ccc; 
    padding: 5px; 
    margin: 5px; 
    white-space: pre-wrap;       
    white-space: -moz-pre-wrap;  
    white-space: -pre-wrap;      
    white-space: -o-pre-wrap;    
    word-wrap: break-word;       
}

pre text wrapping when no need

Try on the style of the <pre> item white-space: pre;, or item white-space: pre-line;

How to use Pre tag to restrict word break in HTML

See the w3 specification for the word-wrap property:

‘break-word’

An unbreakable "word" may be broken at an arbitrary point if there are no otherwise-acceptable break points in the line. Shaping characters are still shaped as if the word were not broken, and grapheme clusters must together stay as one unit. No hyphenation character is inserted at the break point.

Because you're using the 'break-word' rule, this means that your long words will be broken if there is no width left in the container and if there are no other more acceptable break points.

Instead try using the 'normal' rule:

‘normal’

Lines may break only at allowed break points. However, the restrictions introduced by ‘word-break: keep-all’ may be relaxed to match ‘word-break: normal’ if there are no otherwise-acceptable break points in the line.

How do I wrap text in a pre tag for Internet explorer?

For IE 6 and 7 you need to wrap your text with a tag and give it a white-space property. Since you already have a tag wrapped around your text and you have a class for it, just add the white-space property to your
do something like this

#pre-wrap {  white-space: pre-wrap;}

    <p id="pre-wrap">    Lorem ipsum dolor sit amet       consectetuer    adipiscing   elit     sed   diam   nonummy               nibh euismod tincidunt ut laoreet    </p>

Wrapped text in inline-block overflows parent pre tag

Just use padding on <pre> and position .line-numbers absolute.

Please notice the change in HTML markup. If you are always going to have a line number span followed by a text span, you can use pre>span:nth-child(2n-1) instead of .line-number:

pre {  border-style: solid;  padding-left: 3rem;  vertical-align: top;  display: inline-block;  white-space: pre-wrap;}pre>span:nth-child(4n+4) {  background-color: #e5e5e5; /* this is just so you can see the size of it */}.line-number {  position: absolute;  left: 1rem;}

<pre><span class="line-number">12345</span><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span><span class="line-number">12346</span><span>Yr fap deep v pop-up occupy, pug mixtape lo-fi disrupt butcher. Keffiyeh umami yuccie disrupt cold-pressed migas. Fap offal pinterest, +1 retro squid tilde VHS street art thundercats tacos tote bag. </span><span class="line-number">12347</span><span>Cray direct trade photo booth, messenger bag taxidermy chillwave retro pitchfork kickstarter. Franzen echo park meggings photo booth cronut, swag cred chicharrones meh neutra dreamcatcher knausgaard church-key.</span><span class="line-number">12348</span><span>Gentrify forage chillwave hammock fashion axe bushwick, fap sartorial viral typewriter seitan squid health goth knausgaard selvage. Post-ironic intelligentsia kale chips blog.</span><span class="line-number">12348</span><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></pre>

Trying to make a pre tag fit\wrap

A <pre> tag has it's own options for handling white space.

pre: Sequences of white space are preserved. Lines are only broken at newline characters in the source and at <br> elements.
pre-wrap: Sequences of white space are preserved. Lines are broken at newline characters, at <br>, and as necessary to fill line boxes.
pre-line: Sequences of white space are collapsed. Lines are broken at newline characters, at <br>, and as necessary to fill line boxes.

You have also set a width value of max-content in your CSS. Combined, this prevents the text from wrapping.

Using the following CSS together with a media query to target mobile devices would resolve this:

white-space: pre-wrap;
width: 100%;