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

Question

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?

Answer 1

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

pre {white-space: pre-wrap;}

Answer 2

I think that's what you want

CSS:

pre {
    border: 3px solid blue;
    overflow: auto;
    word-break: break-all;
}