Content background cut off [Archive]

View Full Version : Content background cut off

Rain Lover

03-22-2017, 08:17 AM

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 (https://jsfiddle.net/Mori/habLow3r/)

Why does it happen? What's the solution?

coothead

03-22-2017, 10:13 AM

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. Nam tortor nibh,
posuere ac lorem ut, suscipit tincidunt leo. Duis interdum justo ac justo vehicula consequat.
Curabitur et volutpat nibh. Phasellus rutrum lacus at dolor placerat feugiat. Morbi porta,
sapien nec molestie molestie, odio magna vestibulum lorem, vitae feugiat est leo sit amet nunc.
</p>
</div>
</body>
</html>

coothead

jamiehennings

04-17-2017, 09:34 AM

Hello,

I agree with your solution and I suggest you this code. Add a CSS rule to ensure that your body element is at least as wide as the fixed-width area of your site. Something like:

body {
min-width: 980px;
}

molendijk

04-18-2017, 05:40 PM

Rain Lover, the background is truncated because with your code the HTML paragraph element itself is truncated. It is not wider than 300px, whereas the pixel-width corresponding to the length of the string inside the p-element is around 1100px.
All styles (except 'text-css') for the p-element will be affected by this: styles for background, borders, box shadow etc.
Truncation will not happen if you give the p-element a pixel-width corresponding with the length of the string. In this case: 1100px, see above.
But there's a much easier method: put your styles (for ex.: background: green) in the parent of the p-element, just like coothead did.

molendijk

04-18-2017, 06:41 PM

There's yet another way to avoid 'truncation': just give the p-element display: inline-block. This (too) will produce what you want, for some reason. Code:
<style>

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

p {
background: green; display: inline-block;
}

</style>

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