Open Source Technology
CSS - Avoid distorted webpages
On May 24,2022 by Tom Routley
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:
Leave a Reply