光標大小是不同的線路

Question

不同我有一個內容編輯的DIV，其中3線由BR標籤

對下聯點擊導致比一線大光標分隔。

.content { 
 
    line-height: 35px; 
 
}

<div class="content" contenteditable="true"> 
 
    first line<br> 
 
    clik here<br> 
 
    lastline 
 
</div> 
 

我們怎樣才能使光標大小相同的所有行？

Answer 1

.content 
 
{ 
 
    line-height: 35px; 
 
} 
 

 
.content br 
 
{ 
 
    display:block; 
 
    margin: 10px 0px; 
 
    content: "" !important; 
 
}

<div class="content" contenteditable="true"> 
 
    first line<br> 
 
    clik here<br> 
 
    lastline 
 
</div> 
 

嘗試添加特定類內容的div

更好的方式下復位BR，而不需要影響DOM 是前面加上一個虛構的內容，分別爲br ，將被渲染爲一個真實的塊

.content br 
{ 
    display:block; 
    margin: 10px 0px; 
    content: "" !important; 
} 

注意：定義的邊距並不是真的需要，但有用的不依賴DIV線的高度，並且調整你想要

文件： 查找CSS content財產 https://developer.mozilla.org/fr/docs/Web/CSS/content

Answer 2

嘗試這個

<div class="content" contenteditable="true"> <span>first line</span> <span>click here</span> <span>lastline</span> </div> 

.content{ 
    line-height: 35px; 
} 
.content span:nth-child(2){ 
    padding:10px 0; 
} 

.content span{ 
    display:block; 
} 

您可以查看演示這裏https://jsfiddle.net/tenigada/wnkehtkg/2/