overflow ellipsis bei einem zeilenbruch Text

Hallo, ich habe z.b 2 Texte wie diese hier: MeinlangerText ist hier. MeinLangerText Mit overflow:hidden & text-overflow:ellipsis & width:50px sehen die Texte so aus: Text 1: MeinlangerTe... ist hier Text 2: MeinLangerTe... Wie kann ich es machen, dass er trotz Leerzeichen oder Zeilenbrüche, wie beim zweiten Text macht?

Der hier verwendete Code

<style> div{ height:20px; padding:0; margin:0; } #e1{ width:400px; white-space:nowrap; overflow:hidden; text-overflow: ellipsis; } #e2{ width:350px; white-space:nowrap; overflow:hidden; text-overflow: ellipsis; } #e3{ width:150px; white-space:nowrap; overflow:hidden; text-overflow: ellipsis; } #e4{ width: 300px; overflow:hidden; display:block; } span{ margin-left:-10px; white-space: nowrap; text-overflow:ellipsis; } #e5{ width:150px; white-space:nowrap; overflow:hidden; text-overflow: ellipsis; } #e5:hover { overflow: visible; } </style> <div id="e1">Kein abschneiden weil Text und Container gleich gross</div> <div id="e2">Cintainer kleiner alsschrift länge,dann kommen Punkte</div> <div id="e3">Container sehr klein obwohl viel text da ist </div> <div id="e4"><span> Beidseitig abgeschnitten ( Nur bei Gecko Browsern)</span></div> <div id="e5"> Hover mich dann kommt menge text und beim Hovern kommt alles</div>

Add Comment

* Required information
1000
Drag & drop images (max 3)
Powered by Commentics

Comments

No comments yet. Be the first!