CODEWITHSUNDEEP
htmlcss
Tibi458
Tibi458

Reputation: 91

Horizontal scrollbar is displayed when the text is too long

On my site, at the custom content section, i have some paragraphs and lists. In a list item, i have this text:

Online nyomkövetés: http://www.posta.hu/ugyfelszolgalat/nyomkovetes

This link is a little bit long, and it doesnt have any white spaces in it, so on mobile devices, this text goes out of the page and the horizontal scrollbar will show up.

What css should i give it?

Demo site here.

Upvotes: 1

Views: 979

Answers (1)

azizbek masharibov
azizbek masharibov

Reputation: 113

Use css properties like "overflow-wrap" or "word-break" like this:

/* word-break solution */
 -ms-word-break: break-all;
     word-break: break-all;
     /* Non standard for WebKit */
     word-break: break-word;
/* Use word break with hyphens property */
-webkit-hyphens: auto;
   -moz-hyphens: auto;
        hyphens: auto;

or use "overflow-wrap":

overflow-wrap: break-word;

If these properties don't work, try to use them together, or use major versions of browsers (I mean, absolutely not IE 11 😅)

Upvotes: 1

Related Questions