Breaking URLs and Long Text

When porting a website so that it displays well on phones, I ran across a problem wrapping long text without breaks. This text doesn’t wrap so the whole page gets a horizontal scroll.


<p class='break-word'>On my Windows 7 and 8 computer, with a login name of llsc the location that shows up in the top bar is:
Users\llsc\AppData\Roaming\LocuTourMultimedia\Client Manager\Data
</p>

I added a break-word class to my CSS and it works fine.


.break-word {
    word-wrap:break-word;
    overflow-wrap: break-word;
    word-break: break-word;
}

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.