CSS - Avoid distorted webpages

Ask a question

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:

CSS - A tool to create CSS easily
CSS: border-style property