Hello everyone
I've been trying to set up a div that includes an image, a title, and some text.
I want the image to be aligned on the left side, with the title and text following on the right. However, I'm having an issue where the text is overflowing the parent div. Is there a way to specify the exact max-height for the p element so that it fits perfectly within the parent div? I also want to use text-overflow: ellipsis; to ensure the text doesn't overflow - the ellipsis is crucial for a neat ending rather than an abrupt stop.
In the image provided below, you can see my desired layout indicated by the dotted line, including some margin at the bottom of the p element to the div. The blue box represents the size of the p element (as shown in Google Chrome's element inspector).
https://i.stack.imgur.com/ZqcEI.png
div {
border: 1px solid black;
width: 35em;
height: 10em;
}
img {
float: left;
width: 40%;
height: 100%;
margin-right: 1em;
}
p {
height: 100%;
overflow: hidden;
margin-right: 2em;
}
<div>
<img src="IMAGE SOURCE">
<h1>Title</h1>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
</div>
Thank you all for your assistance. If you have any suggestions for improving this query, feel free to edit it to make it more comprehensible to others.