Kürzen Text mit Bild

Question

Ich habe versucht, den Text zu kürzen auf der Grundlage dieser link

Jetzt bin mit Klasse I als

.line-clamp { 
    margin: 0 0 1em 0; 
    overflow: hidden; 
    display: -webkit-box; 
    -webkit-line-clamp: 1; 
    -webkit-box-orient: vertical; 
} 

folgte mit nur Text gut funktioniert. Hier ist mein JSFiddle

Das Problem ist, ich möchte auch ein Bild mit diesem abgeschnittenen Text enthalten, so dass ich versuchte, include image inside div. Sogar das Setzen des Bildes outside the div zeigt Bild unterhalb des Textes. Ich bekomme nicht die richtige Ausgabe. Wie kann ich ein Bild so platzieren, dass ich dieses Bild am Ende des Textes sehen kann?

Answer 1

Nur die Box kürzer machen und schweben sie

.line-clamp { 
 
    margin: 2px; 
 
    overflow: hidden; 
 
    display: -webkit-box; 
 
    -webkit-line-clamp: 1; 
 
    -webkit-box-orient: vertical; 
 
    width:90%; float:left; 
 
}

<div class="line-clamp"> 
 
    Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. 
 
</div> 
 
<img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-help-circled-128.png" width="20px" alt="" class="panel-icon" title="image">