CODEWITHSUNDEEP
javascripthtmlcss
Jcyrss
Jcyrss

Reputation: 1798

In contenteditable element with `inline-block` display, drag-and-drop will create an extra line break in Chrome-like browser

In a contenteditable div element, set its attribute display to inline-block , instead of default block value, for this reason.

In Chrome-like browser, drag and drop something (like text, img ...) on middle of the string will make the following text move to the next line.

But that issue will not happen on Firefox.

How to solve that without changing it back to display:block?

The following is a very simple testing html to repreduce that.

<div contenteditable="true" style="
    display: inline-block; 
    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>

Upvotes: 2

Views: 63

Answers (1)

chrwahl
chrwahl

Reputation: 13135

If you change from a <div> element to a <span> element, and style it with display: block you avoid this issue. It is not that I can explain why, but I tested something similar some years ago.

<span contenteditable="true" style="
    display: block; 
    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
    
</span>

plaintext-only

You can also try out the "new" contenteditable="plaintext-only". It has not landed in Firefox yet, but other browsers have this feature. And like commented, not suited for rich text.

<div contenteditable="plaintext-only" style="
    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>

Upvotes: 1

Related Questions