內容可編輯屬性對div內容呈現不正確的效果

Question

爲什麼將contenteditable="true"添加到div內的跨度會導致斷行？

div{ 
 
    width: 110px; 
 
    height: 80px; 
 
    border:1px solid #5aa; 
 
}

<div> 
 
    <span>IamANowSpaceLineSample</span> 
 
</div> 
 

 
<br/> 
 

 
<div> 
 
    <span contenteditable="true">IamANowSpaceLineSample</span> 
 
</div>

Answer 1

文本 「IamANowSpaceLineSample」 是不是你已經分配給你的DIV的110px寬度更長。它沒有空格，也沒有css規則，說它可以打破這個詞來適應，所以它不會被包裝到適合其父div，並且它擴展到div之外。

但是當你添加contenteditable="true"造型的變化，並得到應用下列（你可以看到，如果你在元素檢查員檢查元素）：

span[Attributes Style] { 
    -webkit-user-modify: read-write; 
    word-wrap: break-word; 
    -webkit-line-break: after-white-space; 
} 

這臺word-wrap: break-word;迫使瀏覽器來包裝文字以適應父div的110px寬度。

如果你想阻止它的包裝，你可以使用white-space: nowrap;（或使DIV足夠寬，以適應！）

例子：

div{ 
 
    width: 110px; 
 
    height: 20px; 
 
    background-color: #aaa; 
 

 
    margin-bottom:2em; 
 
} 
 

 
span.nowrap{ 
 
white-space: nowrap; 
 
}

<div> 
 
    <span>IamANowSpaceLineSample</span> 
 
</div> 
 

 
<div> 
 
    <span contenteditable="true">EditableWithDefaultStyle</span> 
 
</div> 
 

 
<div> 
 
    <span class = "nowrap" contenteditable="true">EditableWithNoWrapStyle</span> 
 
</div>