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の110ピクセル幅に収まるテキスト。

あなたはそれをラッピングしないようにしたい場合は、あなたが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>