为什么跨度没有自动换行？

Question

两个 table 具有 contenteditable 跨度。

第一个打字时自动换行，另一个没有。为什么？添加了简单的比较 table 两者都有效。

奇怪，想知道为什么会这样吗？

span {width: 100% !important;background-color:#e6e6e6;display: inline-block;}  
.k2table {table-layout: fixed; width:600px;border-collapse: collapse}
.k2table tr {height:18px} 
.k2table td {text-align: left;padding:1px;white-space: nowrap;} 
.k2table td+td {text-align: right;width:70px;} 
.k2table td+td+td {text-align: right;width:70px;} 
.k2table td+td+td+td {text-align: right;width:110px;}
.k2table td+td+td+td+td {text-align: right;width:110px;}
.k2table td+td+td+td+td+td {text-align: right;width:110px;}
.princ {table-layout: fixed; width:600px;border-collapse: collapse}
.princ tr {line-height:18px} 
.princ td {text-align: left;padding:1px;white-space:}

<table class="k2table">
<tr><td colspan="6"><span contenteditable="true"></span></td></tr>
<tr><td><br></td><td></td><td></td><td></td><td></td><td></td></tr>
</table>

<table class="princ ht">
<tbody><tr><td><span contenteditable="true"></span></td></tr>
<tr><td><br></td></tr>
</tbody></table>

Simple comparison
<table width="400">
  <tr>
  <td>
  <span contenteditable="true" style="display:block; background-color:red; width:100%;">xxxx</span>
  </td>
  </tr>
</table>

<table width="400">
  <tr>
  <td colspan="2">
  <span contenteditable="true" style="display:block; background-color:red; width:100%;">xxxx</span>
  </td>
  </tr>
  <tr>
  <td>
  1
  </td>
    <td>
  2
  </td>
  </tr>

  
</table>

Answer 1

这是因为您的 第二个 table 的 CSS 规则缺少其 white-space 属性nowrap 的值[= =40=]。此处供参考的是导致两个 table 之间差异的两个 CSS 规则。

.k2table td {text-align: left;padding:1px;white-space: nowrap;}

.princ td {text-align: left;padding:1px;white-space:}

您可能希望将 .pric td CSS 选择器更改为以下内容：

.princ td {text-align: left;padding:1px;white-space:nowrap}

那么两个 table 将一样工作。为了完整起见，我使用上述修复
编辑了您的代码沙箱

span {width: 100% !important;background-color:#e6e6e6;display: inline-block;} .k2table {table-layout: fixed; width:600px;border-collapse: collapse} .k2table tr {height:18px} .k2table td {text-align: left;padding:1px;white-space:nowrap;} .k2table td+td {text-align: right;width:70px;} .k2table td+td+td {text-align: right;width:70px;} .k2table td+td+td+td {text-align: right;width:110px;} .k2table td+td+td+td+td {text-align: right;width:110px;} .k2table td+td+td+td+td+td {text-align: right;width:110px;} .princ {table-layout: fixed; width:600px;border-collapse: collapse} .princ tr {line-height:18px} .princ td {text-align: left;padding:1px;white-space:nowrap}

<table class="k2table"> <tr><td colspan="6"><span contenteditable="true"></span></td></tr> <tr><td><br></td><td></td><td></td><td></td><td></td><td></td></tr> </table> <table class="princ ht"> <tbody><tr><td><span contenteditable="true"></span></td></tr> <tr><td><br></td></tr> </tbody></table> Simple comparison <table width="400"> <tr> <td> <span contenteditable="true" style="display:block; background-color:red; width:100%;">xxxx</span> </td> </tr> </table> <table width="400"> <tr> <td colspan="2"> <span contenteditable="true" style="display:block; background-color:red; width:100%;">xxxx</span> </td> </tr> <tr> <td> 1 </td> <td> 2 </td> </tr> </table>

希望对您有所帮助！

为什么跨度没有自动换行？

Why no auto line break in span?

html

line-breaks

contenteditable