内联块SPAN不允许输入换行符

Question

所以我试图使用SPAN elemenet设置display: inline-block所以它可以包含多行。

当我手动输入文本和文本到达EOL时，它会自动跳转到下一行。

但是我不能使用ENTER来插入换行符，因为游标跳到整个块之外。

http://jsfiddle.net/7yLLg2rz/1/

<div id="window-kitkat" class="form-control" contenteditable="true">
    <div class="skeleton-block" contenteditable="false">
        <span class="skeleton">
            <span class="skeleton-edit" contenteditable="true">TOPIC HEADING</span>
        </span>
        <span class="skeleton">
            <span>Cx: </span>
            <span class="skeleton-edit" contenteditable="true"></span>
        </span>
        <span class="skeleton">
            <span>Px: </span>
            <span class="skeleton-edit" contenteditable="true"></span>
        </span>
        <span class="skeleton">
            <span>Wx: </span>
            <span class="skeleton-edit" contenteditable="true"></span>
        </span>
        <span class="skeleton">
            <span>Tx: </span>
            <span class="skeleton-edit" contenteditable="true"></span>
        </span>
        <span class="skeleton">
            <span>PEARLS: </span>
            <span class="skeleton-edit" contenteditable="true"></span>
        </span>
    </div>
</div>

// Skeleton

.skeleton {
  display: block;
}

.skeleton > span {
  display: inline;
}

.skeleton-edit, .answers-edit {
  width: 100%;
  background-color: #C0FFB3;
  display: inline-block !important;
  min-height: 20px;
}

Answer 1

一种方法是在输入按键时人为地创建换行符：

var spans = document.querySelectorAll（'。skeleton-edit'）;

span.addEventListener('keypress', function (event) {
    if (event.keyCode == 13) {
        // prevent default action
        event.preventDefault();

        // append new line
        this.innerHTML += (this.innerHTML.indexOf('<br>') > -1 ? '<br>' : '<br><br>');

        // focus at the end of text
        var range = document.createRange();
        var sel = window.getSelection();
        range.setStart(this.childNodes[this.childNodes.length - 1], 0);
        range.collapse(true);
        sel.removeAllRanges();
        sel.addRange(range);
    }
}, false);

演示http://jsfiddle.net/7yLLg2rz/3/

Answer 2

尝试按Shift + Enter可在不离开文本框的情况下向文本添加新行。

另一种方法是使用表格。