javascript - 使用空格更新 contenteditable DIV

Question

我有一个网页，上面有一个 DIV。该 DIV 被标记为 contenteditable。我需要 DIV 是“内联”的。我还需要它是最小尺寸。由于内联元素不能有最小宽度，因此我尝试使用   字符串来伪造它。

基本上，当用户键入时，我想添加或删除   元素，除非字符串长于最小大小。我的问题是，渲染时，似乎所有其他元素都渲染为空格。这让我的数学失败了。我不知道为什么会发生这种情况。我创建了一个 fiddle here 。 JavaScript 看起来像这样:

function onKeyDown(elem, spaceCount) {
  var space = ' ';
  var spacesToAdd = '';
  var addSpaceCount = 0;

  var d = document.getElementById('debug');


  var spaceIndex = elem.innerHTML.indexOf(space);
  if (spaceIndex !== -1) {
    addSpaceCount = (elem.innerHTML.length - spaceIndex) / (space.length);
    d.value += 'text: ' + elem.innerHTML + '\n';
    d.value += 'len: ' + elem.innerHTML.length + ' index: ' + spaceIndex + ' count: ' + addSpaceCount + ' original: ' + spaceCount + '\n\n';      

    for (var i=0; addSpaceCount > i; i++) {
      spacesToAdd += ' ';
    }
  }

  var updated = elem.innerHTML.substring(0, spaceIndex) + spacesToAdd;
  elem.innerHTML = updated;
}

如何确保 DIV 中的字符串始终具有最小长度？如果它小于最小长度，我只想添加一些空格以达到最小长度，以便我的 DIV 按我想要的方式呈现。

谢谢

Answer 1

在 CSS 属性中使用 white-space: pre-wrap; 来实现 contenteditable。