How can I hide a part of a child element that is bigger than its parent?

Question

I got a <div> with a <p> inside but sometimes my <p> got so much text inside it goes out of the div under it.

<div style="width: 100px'; height='100px';">
 <p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vehicula consequat tortor, a posuere mi tristique vel. Suspendisse vitae interdum nunc. Vivamus in suscipit arcu, vitae placerat leo. Nulla placerat elit in justo pellentesque, at tincidunt dolor facilisis. Pellentesque maximus leo a nisi varius tempus. Etiam nulla nulla, tempus eget accumsan nec, tincidunt pulvinar erat. Cras massa orci, finibus nec neque auctor, faucibus maximus felis. Sed ac nulla sit amet lacus auctor fringilla. Sed ultricies risus leo, a pulvinar mi posuere vel. Suspendisse potenti. Curabitur ultrices est      risus, sed blandit turpis lobortis ac.
 </p>
</div>

JsFiddle: http://jsfiddle.net/fksdq1b0/

Is there a simple way to fix this so the <p> just stops when it gets bigger than the div?

score 2 · Accepted Answer · edited Aug 27 '20 at 15:52

2

Add overflow: hidden; to the div.

div {
    width: 100px;
    height: 100px;
    border: 1px solid black;
    overflow: hidden;
}

Demo Here

Example using scroll.

overflow: scroll;

Demo Here

Example using auto.

overflow: auto;

Here is a demo with overflowing content

Here is a demo without overflowing content

Learn more about overflow here

visible

Default value. Content is not clipped, it may be rendered outside the content box. hidden The content is clipped and no scrollbars are provided.

scroll

The content is clipped and desktop browsers use scrollbars, whether or not any content is clipped. This avoids any problem with scrollbars appearing and disappearing in a dynamic environment. Printers may print overflowing content.

auto

Depends on the user agent. Desktop browsers like Firefox provide scrollbars if content overflows.

Taken from developer.mozilla.org

edited Aug 27 '20 at 15:52

TylerH

20,799
66
75
101

answered Oct 08 '14 at 07:14

Ruddy

9,795
5
45
66

Thanks is there a way to add a scrollbar? :o that would be even nicer – Stefan Oct 08 '14 at 07:18
@StefandeRaadt change `hidden` to `scroll`. So you will have `overflow: scroll;`. And yes you can use `auto`, this will not leave a scrollbar if the content fits. – Ruddy Oct 08 '14 at 07:19
@StefandeRaadt use `overflow: auto`. – Mr_Green Oct 08 '14 at 07:21

score 1 · Answer 2 · answered Oct 08 '14 at 07:18

1

If you still want the user to see the content try overflow:auto live DEMO

div{
    width: 100px;
    max-height: 100px;
    overflow:auto;/**if not use  overflow:hidden*/
    border: 1px solid black;
}

answered Oct 08 '14 at 07:18

Gildas.Tambo

22,173
7
50
78

score 1 · Answer 3 · answered Oct 08 '14 at 07:25

As the other answers have mentioned, use

overflow:hidden;

However if you don't want to hide this content altogether, you can choose to scroll it. Using simply

overflow:auto;

Will give you both horizontal and vertical scroll bars - even if it doesn't need them.

Instead, to just get horizontal scroll functionality use

overflow-x:scroll;

Or for vertical scroll use

overflow-y:scroll;

I haven't attached a JSFiddle as you have several of those already, however look here for more about CSS overflow:

score 1 · Answer 4 · answered Oct 08 '14 at 07:26

You will either have to use overflow:hidden (which hides everything that "overflows" outside of the parent div, or overflow-x: scroll ( adds a horizontal scroll bar for your text) or overflow-y:scroll; adds a vertical scroll bar for your text.

Warning: overflow:hidden; will hide your text that overflows and render it unusable.

How can I hide a part of a child element that is bigger than its parent?

4 Answers4