How to make a wordwrap inside a <pre>?

Asked

Viewed 37 times

0

I have a tag <pre>Oie</pre>

I wanted this text to have a maximum width of 595px word-wrap:break-word; what I did was this

pre {
width:595px;
word-wrap:break-word;

}

I do it , but nothing happens, I just squeeze I do it

<pre>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</pre>

and the text does not break

html css

1 answer

0


Use the style white-space, besides the word-wrap: break-word;, to apply line break to long strings inside the <pre>:

pre {
   width:595px;
   white-space: pre-wrap;
   word-wrap: break-word;   
}
<pre>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</pre>

  • our HOW DID YOU KNOW THIS? Because these codes are hard to write down

  • @Andressalemon We keep learning. :)

  • @Andressalemon I did an update on the reply. I removed the prefixed styles, I think you don’t need this.

  • Thanks DVD, our I’ve never heard of this whitespace no course taught me :( programming is complicated

  • Can you explain to me what white space is? I have researched here on the net the language is a little complicated :(

  • Poxa me exlicar o que é o whitespace?

  • @Andressalemon It treats how white spaces will be treated within the element. The value pre-wrap; preserves spaces and breaks the text when necessary. Blank spaces would be: olá_Mundo! (1 blank space between "hello" and "World"); Oi_____você! (5 blank spaces between the two words)... the pre-wrap; leaves the spaces as they are.

Show 2 more comments

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.