CODEWITHSUNDEEP
htmlcss
Pawan
Pawan

Reputation: 1598

Text overflowing the sides of its container div

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

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;
}
<body>
  <div id="main">
    <p>jjfaljfejjfkadjf;lj;jmvwutpvwjfjdsjfklsdkdfjklsjfkljwjeiojfklslfkjsvfoiwjeorfjviw nfwvfjojwkdsklflskjfvwiernvejveurvnwejfkdsjwjjrfjiowjeionvkjlksjdfkljkljdwijiodjfiovnwjoiejoijfiojkjsljfdkjslfiejskdklfjlksjfeijskdjfklsjkldjfwjnfklsjfwoevjnwfdjshfk
      fsdkjfsjdfkjksjdfkjsljfdkljskl
    </p>
  </div>

</body>

</html>

And here is what is displayed:

Screenshot

I have read other questions but none of them solves my issue. The thing is that the text does not overflow the bottom of the div. Is it something to do with the width I have set for the div?

Upvotes: 10

Views: 17145

Answers (3)

Kyubey
Kyubey

Reputation: 41

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;

More info

Upvotes: 3

Ryan McDonough
Ryan McDonough

Reputation: 10012

I can 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 padding and just have:

padding:  5px;

Also add in : 

word-wrap:break-word;

That way you get 5px padding around the entire div and your content will be wrapped.

Upvotes: 2

Alan Shortis
Alan Shortis

Reputation: 1109

This will wrap your text within the div, even if your string is unbroken (which is what 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 */ 
}

Upvotes: 13

Related Questions