内容可编辑属性对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>