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>