CSS - Avoid distorted webpages

April 2018

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;

Published by deri58. Latest update on October 25, 2010 at 08:57 AM by deri58.
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/).
CSS - A tool to create CSS easily
CSS: border-style property