basti1012.bplaced.net

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?

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>