CSS - Avoid distorted webpages

December 2016

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;


Related :

This document entitled « CSS - Avoid distorted webpages » from CCM (ccm.net) is made available under the Creative Commons license. You can copy, modify copies of this page, under the conditions stipulated by the license, as this note appears clearly.