body { text-align: center; } #content { width...">
All geek questions in one place

Does the text expand beyond the div inside?

I have this code:

<html> <head> <style type="text/css"> body { text-align: center; } #content { width: 60em; margin: 0, auto; background-color: #CCC; } </style> </head> <body> <center> <div id="content">kdsjlglkdfjgolksdjflgojsdfsdoljfglsdfghsdkjfgkdhfgkhlglkdfjgolksdjflgojsdfsdoljfglsdfghsdkjfgkdhfgklglkdfjgolksdjflgojsdfsdoljfglsdfghsdkjfgkdhfgklglkdfjgolksdjflgojsdfsdoljfglsdfghsdkjfgkdhfgklglkdfjgolksdjflgojsdfsdoljfglsdfghsdkjfgkdhfgklglkdfjgolksdjflgojsdfsdoljfglsdfghsdkjfgkdhfgklglkdfjgolksdjflgojsdfsdoljfglsdfghsdkjfgkdhfgklglkdfjgolksdjflgojsdfsdoljfglsdfghsdkjfgkdhfgkkjdghkdsfjgksdjfhg</div> </center> </body> </html>

Why the text does not remain inside the div, but goes on one line to the end? I want it to have line breaks relative to the div inside. How can i do this?

+4
source share
3 answers

Since word wrap occurs between words.

At least by default. The word-break property may change this in some browsers, but you should avoid meaningless words in the content.

+8
source

Use the CSS attribute "word-wrap:"

 #content { width: 60em; margin: 0, auto; background-color: #CCC; word-wrap: break-word;

}

It was just IE, but I saw how it worked in Chrome and Firefox.

+5
source

JsFiddle example

 #content { word-wrap: break-word; }
+1
source

Source: https://habr.com/ru/post/1332753/

More articles:


All Articles