All geek questions in one place

Text overflowing with sides of its container div

My text inside the containing div overflows it from the sides where it should be automatically wrapped.

Html:

<!DOCTYPE HTML> <html> <head> <title> Welcome to my site </title> <link rel=stylesheet type="text/css" href=global.css> </head> <body> <div id="main"> <p>jjfaljfejjfkadjf;lj;jmvwutpvwjfjdsjfklsdkdfjklsjfkljwjeiojfklslfkjsvfoiwjeorfjviw nfwvfjojwkdsklflskjfvwiernvejveurvnwejfkdsjwjjrfjiowjeionvkjlksjdfkljkljdwijiodjfiovnwjoiejoijfiojkjsljfdkjslfiejskdklfjlksjfeijskdjfklsjkldjfwjnfklsjfwoevjnwfdjshfk fsdkjfsjdfkjksjdfkjsljfdkljskl</p> </div> </body> </html>

And this is css

 html { padding:0; margin: 0; } body { background: #E4E4E4; height:100%; width:100%; } #main { display: block; background: white; width:960px; margin: 0 auto; position: relative; padding: 5px 5px; }

And here is what is displayed:

Screen shot

I read other questions, but none of them solves my problem. The fact is that the text does not overflow the bottom of the div. Is this somehow related to the width I set for the div?

+4
source share
3 answers

This will wrap your text in a div, even if your line is not broken (which, I assume, you mean).

 .wordwrap { white-space: pre-wrap; /* Webkit */ white-space: -moz-pre-wrap; /* Firefox */ white-space: -pre-wrap; /* Opera <7 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* IE */ }
+5
source

The problem is that you have a very long word. You can do, as they said, with word-wrap: break-word; , or you can hide the text.

You can use text-overflow, i.e.:

 p { text-overflow: ellipsis; }

Where:

text-overflow: clip|ellipsis|string;

Additional Information

+1
source

I see what you mean, the final K slightly overlaps the edge of the div in Chrome.

I would suggest removing the second 5px in your add-on and just have:

 padding: 5px;

Also add:

 word-wrap:break-word;

This way you get 5px filling around the whole div and your content is wrapped.

0
source

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

More articles:


All Articles