OgustLearns OgustLearns - 5 months ago 21
CSS Question

CSS Prevent text from overflowing the parent div

I have a description of a website
HTML:

<div class="a_desc">
<div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque
</div>
<div>
Lorem ipsum dolor sit amet, consectetuer Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque </div><div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque </div>
</div>


CSS:

.a_desc{
position: relative;
margin: 0.4em auto 0 auto;
background: rgba(27,27,25,0.7);
max-width: 500px;
padding:0.4em;
border-radius: 1em;
font-weight: 100;
max-height: 100%:
-webkit-text-size-adjust: 100%;
-moz-text-size-adjust:100%;
-ms-text-size-adjust:100%;
text-size-adjust:100%;
}
.a_desc > div{
margin-bottom: 0.5em;
line-height: 17px;
display: table;
}
.a_desc > div:last-child:after{
content: ".";
visibility: hidden;
display: block;
height: 0;
clear: both;
}


It works okay on android phone,but when i test it on iphone the text overflows the parent div:
Overflows at the bottom

How can that be prevented,How can i expand the parent to fit all of the text?

Answer

No one gave me the right answer, so I kept trying and it turns out that it works if you simply set parent to display: table; and child to display: table-row;

Comments