htmlcsspre

word-break: break-all; CSS property not working for HTML <pre> tag?

I used the pre element to make my text appear as I typed it. But the text overflows past the container. So, I wanted to use the CSS word-break property to wrap the text, but it doesn't work.

pre {
  border: 3px solid blue;
  word-wrap: break-word;
}
<pre>

• DEPOSIT

• WITHDRAW

• TRANSFER

• AIRTIME TOP UP

• DATA RECHARGE

• ACCOUNT OPENING:

OPAY, PALMPAY, KUDA, MONIEPOINT,VPAY, etc.

• STARTIMES SUBSCRIPTION

• GOTV SUBSCRIPTION

• DSTV SUBSCRIPTION

• ELECTRICITY BILLS (EEDC)

• BET FUNDING:

Bet9ja, BETKING, BETWAY, SPORTY BET, 1X BET, etc.

            </pre>

Why is the style not showing effect, and is there a way to wrap text for the tag?

Solution

  • Text in tags doesn’t wrap by default but you can try :

    pre {white-space: pre-wrap;}