行高度不影響第一線CONTENTEDITABLE

考慮下面的HTML：行高度不影響第一線CONTENTEDITABLE

<div class="content" contenteditable="true"> 
rrr<br> 
ttt 
</div>

& CSS：

.content { 
line-height: 35px; 
}

你得到的是僅影響第二線和線下的高度。令我困擾的是，插入符號的高度受線高的影響，因此它在第一行然後是第二行顯着縮短。

使用此Fiddle可以看到它在行動中。將脫字符號放在第一行和第二行，並在其中每個字符中注意脫字符。注意它的高度因線高而異。

我不能允許主contenteditable元素中的每一行的內部包裝。

當試圖使用div::first-line和使用line-height在CSS規則不影響它，但其他屬性，如background-color做。

是否有影響第一行的可能方法？我更喜歡css專用的解決方案，但如果沒有選擇，Js也可以。

來源

2015-06-11 Or A.

哇...很好的趕上。 –

與'
'的某些造型有關。如果用'

'替代它，則插入符號不再考慮第二行的行高。 – GillesC

儘管什麼在其他的答案（S）中提到，它是不是真的有<br>的問題。實際的問題在於Chrome，特別是它如何處理高於自身高度的行高的文本。這個Chrome行高問題實際上是我們許多人在做CSS時長期存在的一個惱人的原因。插入符總是跨越整個行高，而文本不是行高的垂直中間。更糟糕的是，他們把第一行不同於其他行:(

<br>的建議是一個黑客來掩蓋問題，但它只適用於如果您要在文本中手動輸入換行符。區僅有以證明br破解方法不適用於普通文本域/ CONTENTEDITABLE地區擁有自然產生的環繞文字工作：http://jsfiddle.net/8ao367gz/1/

壞消息：沒有真正解決它尚未普遍的共識。是爲了找到一種解決方案，並且不要將line-height設置爲normal或1以外的任何東西。如果您必須使用li在設計中使用ne-height，或者使用Chrome瀏覽器上跨越整個行高的怪異底端對齊插入符號，或者告訴用戶使用其他瀏覽器（沒有此問題）（如Firefox）。或者我們都可以不斷抱怨並向Chrome提交錯誤報告，並祈求他們「修復」這一點。我非常懷疑，因爲我不認爲他們認爲這是一個錯誤;即使他們這樣做，可能也是一個非常低的優先事項。

來源

2015-06-11 15:13:23 light

謝謝你，我的筆記本網絡應用很長一段時間讓我困惑。 – Imskull

不客氣。你有沒有向Chrome提交錯誤報告？：P – light

不，但我只是在https://code.google.com/p/chromium/issues/detail?id=422652上「抱怨」 – Imskull

打印機視圖（如下面的評論中提及這不會打破預期的行爲）：

br { 
    content: " "; 
    visibility: hidden; 
    display: block; 
}

來源

2015-06-11 10:19:03 boszlo

這解決了問題，但創建了一個不同的問題：現在，當您使用箭頭鍵向上/向下移動瀏覽器的本機行爲時，當按向上箭頭時，插入符首先移動到行首，或者轉到按下箭頭時第4個/第5個字符。這個新問題太嚴重了，無法將解決方案視爲解決原始問題，因爲它會破壞本機瀏覽器行爲。在這裏看到問題：[小提琴]（http://jsfiddle.net/ttduju4z/2/） –

哦，對。我沒有注意到這一點。我現在編輯了我的答案。它應該按預期工作。 – boszlo

行高度不影響第一線CONTENTEDITABLE

回答

相關問題