Chrome类浏览器中设置为inline-block的contenteditable元素拖拽时产生多余换行的解决方案

我刚好碰到过一模一样的问题！Chrome系浏览器对设为inline-block的contenteditable元素，在拖拽内容时的排版逻辑确实有个小bug，Firefox那边处理得就更合理些。不想改回display:block的话，这几个方案亲测有效：

方案一：用display: inline-table替代inline-block #

这个是我当时最快解决问题的方法，inline-table能保留类似inline-block的内联布局特性，同时避开Chrome的这个拖拽换行bug。直接修改元素的display属性就行：

<div contenteditable="true" style="
    display: inline-table; 
    white-space:pre-wrap;
    padding:3px;
    min-height:100px;
    width:100%;
    border:1px solid skyblue; 
">
    drag `this` text below, see if new line break created at the end of drop postion
    
    drop `here` please
</div>

方案二：添加vertical-align: top（或其他非baseline值） #

有时候这个多余换行是因为inline-block元素默认的vertical-align: baseline导致的，Chrome在拖拽时的布局计算出了偏差。给元素加上vertical-align: top（或者middle、bottom都可以），就能修复这个问题：

<div contenteditable="true" style="
    display: inline-block; 
    vertical-align: top;
    white-space:pre-wrap;
    padding:3px;
    min-height:100px;
    width:100%;
    border:1px solid skyblue; 
">
    drag `this` text below, see if new line break created at the end of drop postion
    
    drop `here` please
</div>

备选方案：用block + width: fit-content模拟inline-block（自适应宽度场景） #

如果你原本用inline-block是为了让元素宽度自适应内容，那可以用display: block配合width: fit-content来替代，这样既能达到类似效果，也能避开拖拽bug：

<div contenteditable="true" style="
    display: block; 
    width: fit-content;
    white-space:pre-wrap;
    padding:3px;
    min-height:100px;
    border:1px solid skyblue; 
">
    drag `this` text below, see if new line break created at the end of drop postion
    
    drop `here` please
</div>

你可以先试试方案一，我当时用这个直接就搞定了；如果你的场景有特殊的布局需求，方案二或者备选方案应该也能解决问题～

备注：内容来源于stack exchange，提问作者Jcyrss