Caret spostato verso il basso sulla seconda riga se si utilizza l'altezza della linea CSS - Esiste una soluzione alternativa?

L'utilizzo della proprietà line-height in un contenteditable div causa lo spostamento verso il basso del cursore una volta spostato sulla seconda riga. Ciò è più evidente con alcuni tipi di carattere web personalizzati, ma anche con caratteri standard come Arial. C'è una soluzione alternativa per questo comportamento?Caret spostato verso il basso sulla seconda riga se si utilizza l'altezza della linea CSS - Esiste una soluzione alternativa?

Questo mostra il cursore sulla prima riga

Normal caret on the first line
Caret sulla seconda riga spostata verso il basso

Shifted caret on the second line

una demo del comportamento può essere trovato:http://jsfiddle.net/sGgVR/

Edit: Il browser utilizzato per testare Safari 6.0.1 e Chrome 22.0.1229.94

fonte

2012-10-23 klotz

Non riesco a duplicare questo comportamento. Vedo la caratura andare sopra e sotto i personaggi, sia che io sia sulla linea 1 o sulla linea 2. E la rimozione del 'line-height' CSS non influisce su questo. –

Che browser hai usato? – klotz

Google Chrome \t 22.0.1229.94 –

Non vedere alcuna soluzione elegante per questo. Quando line-height è inferiore a font-size, le linee si sovrappongono e la parte superiore del cursore viene troncata dalla casella di testo superiore.

Forse lo pseudoelemento :first-line aiuterà in qualche modo, tuttavia, provarlo. Ma non sono riuscito a farne un buon uso qui.

Un altro modo perverso è quello di interrompere i testi multilinea su diversi elementi utilizzando JS. Ognuno con contentEditable ovviamente. E poi creare nuovi elementi su interruzioni di riga, unendo backspace o delete. Ma questa soluzione sembra come via complicata.

fonte

2012-10-24 19:50:05 gkond

Caret spostato verso il basso sulla seconda riga se si utilizza l'altezza della linea CSS - Esiste una soluzione alternativa?

risposta

Problemi correlati