Effet incorrect de l'attribut content-editable sur le rendu div

Question

Pourquoi ajouter contenteditable="true" à une travée à l'intérieur d'une div, provoquer une rupture de ligne?

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

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

 
<br/> 
 

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

Answer 1

Le texte "IamANowSpaceLineSample" est plus long que la largeur 110px que vous avez alloué à votre div. Il n'a aucun espace et aucune règle css disant qu'il peut casser le mot pour s'adapter, ainsi il n'est pas enveloppé pour s'adapter à l'intérieur de son div parent, et son extension à l'extérieur de la div.

Toutefois, lorsque vous ajoutez contenteditable="true" les changements de style et les éléments suivants soit appliquée (comme vous pouvez le voir si vous vérifiez l'élément dans l'inspecteur des éléments):

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

Ceci définit word-wrap: break-word; qui force le navigateur à envelopper la texte pour tenir dans la largeur de 110px de la div parente.

Si vous voulez empêcher l'emballage, vous pouvez utiliser white-space: nowrap; (ou faire suffisamment large pour tenir div!)

Exemples:

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>