內聯塊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可在不離開文本框的情況下向文本添加新行。

另一種方法是使用表格。