Welcome to WebmasterWorld Guest from 100.24.209.47

Forum Moderators: not2easy

Message Too Old, No Replies

Content background cut off

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

Full Member

5+ Year Member Top Contributors Of The Month

joined:Mar 1, 2010
posts: 209
votes: 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?
10:01 am on Mar 22, 2017 (gmt 0)

Senior Member from GB 

joined:Oct 2, 2003
posts: 1019
votes: 39


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
8:06 pm on Mar 22, 2017 (gmt 0)

New User

joined:Nov 15, 2015
posts: 39
votes: 2


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.