I want to achieve the below design where the text wraps around a heading and truncates by ellipisis after the second line.
I could achieve the truncation using flexbox and line clamping but am not able to wrap the text around the heading.
Snippet below:
#container {
max-width: 500px;
display: flex;
}
#header {
background-color: lightgreen;
}
#text {
background-color: lightblue;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
overflow: hidden;
}<div id="container">
<span id="header">Ad</span>
<span id="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
</div>I tried to use float, but, using display: -webkit-box; makes the text behave like a block element and it does not wrap around the heading.
Snippet below:
#container {
max-width: 500px;
}
#header {
background-color: lightgreen;
float: left;
}
#text {
background-color: lightblue;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
overflow: hidden;
}<div id="container">
<span id="header">Ad</span>
<span id="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
</div>Any pointers on how I could make the text truncate and also wrap around the heading? Thanks.