contenteditable single-line zeigt alle Zeichen mit CSS

Question

Ich muss die Zeichen abschneiden, wenn Benutzer das div fokusiert, zeigt es alle Zeichen ohne zu schneiden an.

Wir archiviert die gleiche, aber wir haben ich mehrere Zeilen

aber Benutzer müssen die div Notwendigkeit alle Zeichen in einzelnen Zeile zeigen konzentrieren.

DEMO

HTML:

Dies sollte worksThis sollte funktioniert Dies sollte worksThis sollte worksThis sollte worksThis sollte worksThis sollte worksThis sollte worksThis sollte worksThis sollte worksThis sollte worksThis sollte funktioniert

CSS:

.single-line { 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    display: inline-block; 
    vertical-align: top; 
} 

    [contenteditable="true"].single-line { 
     white-space: nowrap; 
     width:200px; 
     overflow: hidden; 
    } 
    [contenteditable="true"].single-line br { 
     display:none; 

    } 
    [contenteditable="true"].single-line * { 
     display:inline; 
     white-space:nowrap; 
    } 


.single-line:focus { 
    white-space:normal; 
} 

Answer 1

Vielleicht so?

See this fiddle

Ich füge einen festen height auf dem Behälter und deaktivieren Sie die text-overflow Eigenschaft auf Fokus.

.single-line:focus { 
    text-overflow: inherit; 
} 

Answer 2

einfach die width-auto wie folgt aktualisiert:

.single-line:focus { 
    width: auto; 
} 

Überprüfen Sie die demo

Answer 3

diese Änderung in der: foucs CSS.