CODEWITHSUNDEEP
css
Paul Williams
Paul Williams

Reputation: 31

How prevent word breaking in small mobile views

The H1 title on the below URL : https://www.purelocal.com.au/celebrity-ink-tattoo-studio-highpoint

In mobile , because of the font size , the words are often cutoff halfway and forced to a new line. Is the only way to prevent this to use a small font for mobile ?

Upvotes: 2

Views: 1280

Answers (2)

Dmitry Gusarov
Dmitry Gusarov

Reputation: 1629

Another way: you can and likely should use a 'css breakpoints' like this:

@media only screen and (min-width: 768px) and (max-width: 959px){
 
...
 
}

to fine-tune a two or more layouts on your page (e.g. mobile & desktop). This can also include word-break attribute inside.

Upvotes: 1

monkeybanana
monkeybanana

Reputation: 267

you could use the css word-break: break-word; to break the words on the spaces of words, not on the words itself.

other options for the word-break would be break-all, keep-all, or normal (the default value)

Here is a sample link for the four values of the word-break property

Upvotes: 1

Related Questions