Content background cut off

Forum Moderators: not2easy

Message Too Old, No Replies

Content background cut off

Rain_Lover

8:16 am on Mar 22, 2017 (gmt 0)

Scroll to the right and you'll see the background is truncated:

div {
 width: 300px;
 overflow: auto;
}

p {
 background: green;
}

<div>

 <p>ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.</p>

</div>

DEMO [jsfiddle.net]

Why does it happen? What's the solution?

birdbrain

10:01 am on Mar 22, 2017 (gmt 0)

Hi there Rain Lover,

here is one possible solution for you to try...


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>untitled document</title>
<style media="screen">
div {
 width: 18.75em;
 background: #008000;
 overflow: auto;
 }
p {
 white-space: nowrap;
 }
</style>
</head>
<body> 
<div>
 <p>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet sem sed libero 
   bibendum tempus faucibus quis mi. Nulla rhoncus vel ipsum in volutpat.
 </p>
</div>
</body>
</html>

birdbrain

jbnz

8:06 pm on Mar 22, 2017 (gmt 0)

Well, your text in the p tag is unusual in that it contains no spaces, in effect it is one very long word. And that is how a long word is handled given your markup.

Add in a few spaces into your p tag text and the text will start to wrap and expand the div downwards, the green background expanding with it. However if there is any single word still in the text that exceeds 300px in length given its font-size, then it will overflow to the right. Try this as the p tag in the fiddle

<p>ThisIsSomeText. ThisIsSomeText.ThisIsSomeText.ThisIsSomeText. ThisIsSomeText.ThisIsSomeText. ThisIsSomeText.ThisIsSomeText.ThisIsSomeText. ThisIsSomeText.</p>

The extra spaces mean some of the text will fit inside the 300px div yet some is still too big and overflows.

Hope that helps.