0
Thanks

A few words of thanks would be greatly appreciated.

CSS - Avoid distorted webpages


Avoid distorted pages
A web page may be deformed because of its content: the text is not aligned correctly.
There are however some very simple solutions to this.

Masking part of the text
If the box container is too small and that the content exceeds it's length, you can use the following code to hide everything beyond:

container {
overflow: hidden:
}


The remaining (masked) content can be added to the next line.

The first method hides and makes invisible part of the text. It is not always practical. If the deformation of the page is simply due to the text (a word that stretches its containing block), you can cut the word:

container {
word-wrap: break-word;
}


Result:
0
Thanks

A few words of thanks would be greatly appreciated.

Ask a question
CCM is a leading international tech website. Our content is written in collaboration with IT experts, under the direction of Jeff Pillou, founder of CCM.net. CCM reaches more than 50 million unique visitors per month and is available in 11 languages.
This document, titled "CSS - Avoid distorted webpages," is available under the Creative Commons license. Any copy, reuse, or modification of the content should be sufficiently credited to CCM (https://ccm.net/).

0 Comments