Content background cut off

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

Why does it happen? What’s the solution?

Try this:

div {
}

p {
  background: snow; /*green;*/
  overflow: auto;
}

Edit:

Both DIV and P are block elements and default to a width of 100% of the containg block. The string length is greater than 300px.

Yes the p is effectively also also only 100% wide so anything that pokes out is ignored.

If you add display:table to the p element then it wil shrink to fit the content and the background colour will be maintained.

p {
  background: green;
  display:table;
}
4 Likes

Hi there Rain_Lover,

here is an alternative method for your consideration…

<!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>
<!--<link rel="stylesheet" href="screen.css" media="screen">-->
<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>

cootnead

1 Like

Both @John_Betong and @PaulOB already explained why it happen.

And both John’s and Paul’s solutions works.

I agree with Paul’s suggestion, but there are always more options. :slight_smile:

An alternative could be the inline-block display, if it fits with other conditions not mentioned:

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

Inline-block (or inline-table) too will shrink/grow to fit the content and maintain the background.

They would of course change the p element from its block property, only Paul’s table-solution preserves the block while fitting the content.

EDIT)
As the div has overflow set, you also have the option to float the p to make it fit the content:

p {
  background: green;
  float: left;
}

But as I said, only Paul’s table display will e.g. keep the collapsing margins for the p.

I don’t understand why Rain_Lover would not use something like @coothead’s solution from the get-go unless there were more than one paragraph in each parent container and the paragraphs had different background-colors… in which case none of the solutions offered quite fills the order.

To wit:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>background-color of p truncated at div width</title>
<!--
One parent box containing Three paragraphs with different background-colors
-->
    <style type="text/css">
h2 {
    margin-top:2em;  /* vertical space between divs in this demo */
}
body > div {
    width:400px;
    outline:1px dashed magenta;
    overflow:auto;
}
p {
    background-color:#ffc0cb;
    padding:1em;  /* replace margin with padding */
    margin:0;
}
p:nth-child(2) {
    background-color:#8e8;
}
p:nth-child(3) {
    background-color:#87ceeb;
}
.john p {
    overflow:auto;  /* allows background-color to extend to the full width of the paragraph. applies scrollbar to each paragraph */
}
.paul p {
    display:table;  /* allows background-color to extend to the full width of the paragraph */
}
.ronpat div {
    display:table;
}
    </style>
</head>
<body>

<h1>background-color of p truncated at parent's width</h1>
<div>
    <p>ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.</p>
    <p>ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.</p>
    <p>ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.</p>
</div>
<h2>John_Betong's solution</h2>
<div class="john">
    <p>ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.</p>
    <p>ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.</p>
    <p>ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.</p>
</div>
<h2>PaulOB's solution</h2>
<div class="paul">
    <p>ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.</p>
    <p>ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.</p>
    <p>ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.</p>
</div>
<h2>ronpat's sandbox</h2>
<div class="ronpat">
    <div>
        <p>ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.</p>
        <p>ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.</p>
        <p>ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.</p>
    </div>
</div>

</body>
</html>
1 Like

In the end it depends on what the exact criteria are :slight_smile:

All of the solutions are good and fill a purpose depending on what happens next.

2 Likes

Of course they do. I was speculating about one of those possible “what happens next” situations. Context. The challenge of the unknowns. :wink:

1 Like

It shrinks the space between the scrollbar and the text — the paragraph margin goes behind the scrollbar.

Thanks for the answer, but giving the background to the div has a different result.

Perfect! Thanks! :clap:

Yes it works, but I don’t understand what exactly float: left does here. Would you mind explaining more?

Float is a shrink to fit algorithm like tables and therefore it’s minimum width will generally be its content width and as floats are removed from the flow they aren’t explicitly contained by a surrounding div and their width can be greater than the parent.

An auto width static non floated elements width is defined by its parent and so content gets cut off when the parent is smaller than its content.

4 Likes

Helpful — as always! :slight_smile:

Could you explain more about that “different result”? I thought I speculated rather liberally, but apparently didn’t think of something. I’m just curious.

1 Like

I realize that the display of the text within the background is different. I would appreciate it if you would show a screenshot or similar simulation of how you are using the text with a background-color applied inside the div. I’m really quite curious to see how it’s being employed.

The difference is clear: as you see in this update the green background covers everything, not only the p, but also any possible elements inside the div.

Thank you for the reply, @Mori.

You are an experienced member, Rain_Lover. I was attempting to be sure that we met your request by asking for a bit more information about how the div with the sentence might be used. Might there be two or more sentences in the box? Might the box have a background image with the colored text overlaying that image? etc. Trying to imagine how it might be used so we could meet your expectations the first time around. To that end, it is always helpful to know something about the context in which an object will be used on a page.

The more we know about someone’s wishes, the more effectively and efficiently we can help. Our motives are pretty simple. :slight_smile:

1 Like

Thank you for being so helpful! :slight_smile:
Actually it’s something I saw here and I wondered how we could deal with it.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.