HTML・CSS Writing 2022

Pre tag wraps and breaks characters

By default, the pre tag does not break characters. To wrap the character at the right end, specify "pre-wrap" for "white-space" in CSS. Beyond on the right side, if the characters pop out, it looks bad, so let's adjust it.

pre {
   white-space: pre-wrap;
}

I want to start a new line in character units

If you want to start a new line in character units instead of word units, set "break-all" in CSS "word-break" in addition to the above. You can eliminate the situation where a very long character string pops out to the right.

pre {
   white-space: pre-wrap;
   word-break: break-all;
}