Caret przesunięty w dół na drugiej linii, jeśli używasz CSS linii wysokości - Czy istnieje obejście?

Question

Używanie właściwości w div contenteditable powoduje przesunięcie kreski w dół po przesunięciu jej do drugiej linii. Jest to bardziej widoczne w przypadku niektórych niestandardowych czcionek internetowych, ale dzieje się tak również w przypadku standardowych czcionek, takich jak Arial. Czy istnieje obejście tego zachowania?

To pokazuje karetkę na pierwszej linii

użyciu kursora na drugiej linii przesunięte w dół

demo zachowania można znaleźć:http://jsfiddle.net/sGgVR/

Edit: Przeglądarka używana do testowania Safari 6.0.1 i Chrome 22.0.1229.94

Answer 1

Nie widzę żadnego eleganckie rozwiązanie tego problemu. Gdy line-height jest mniejszy niż font-size, linie pokrywają się, a górna część kursora jest odcięta przez górny tekst.

Może jednak jakiś pseudoelement pomoże, jakkolwiek, spróbuj. Ale nie mogłem tu dobrze wykorzystać.

Innym krętaczem jest łamanie wieloliniowych tekstów na kilka różnych elementów za pomocą JS. Każda z treściami Oczywiście. A następnie tworzenie nowych elementów na łamach linii, łączenie na backspace lub usuwanie. Ale to rozwiązanie wydaje się zbyt skomplikowane.