CODEWITHSUNDEEP
javascripthtmlcsscontenteditable
Basj
Basj

Reputation: 46401

Whitespace in contenteditable causes linebreak

When you click on the background in the following snippet, a contenteditable <span> is created. Try to write "Hello World". The whitespace causes a linebreak. Why ?

How to make that the whitespaces don't cause any linebreak anymore in the contenteditable span ?

    window.onload = function() {
      var container = document.createElement("div"),
        wrapper = document.createElement("div");

      container.style.position = "absolute";
      wrapper.style.position = "relative";
      container.appendChild(wrapper);
      document.body.appendChild(container);

      window.onclick = function(e) {
        var tb = document.createElement('span');
        tb.contentEditable = true;
        tb.style.position  = 'absolute';
        tb.style.top = e.clientY + 'px';
        tb.style.left = e.clientX + 'px';
        wrapper.appendChild(tb);
        tb.focus();
      }
    }

Upvotes: 0

Views: 386

Answers (1)

Moob
Moob

Reputation: 16184

Use CSS white-space:pre

"Sequences of whitespace are preserved, lines are only broken at newline characters in the source and at <br> elements."

https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

Simply add the line:

tb.style.whiteSpace = 'pre';

E.G: 

    window.onload = function() {
      var container = document.createElement("div"),
        wrapper = document.createElement("div");

      container.style.position = "absolute";
      wrapper.style.position = "relative";
      container.appendChild(wrapper);
      document.body.appendChild(container);

      window.onclick = function(e) {
        var tb = document.createElement('span');
        tb.contentEditable = true;
        tb.style.position  = 'absolute';
        tb.style.top = e.clientY + 'px';
        tb.style.left = e.clientX + 'px';
        tb.style.whiteSpace = 'pre'; // < here
        wrapper.appendChild(tb);
        tb.focus();
      }
    }

Upvotes: 1

Related Questions