Question

为什么将contenteditable="true"添加到div中的span，导致断行？

＆＃13;

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

＆＃13;

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

＆＃13;

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>

内容可编辑属性对div内容呈现的效果不正确

1 个答案: