html - 将 span 放在可编辑 div 的最后一行旁边

Question

我尝试做一些类似于 Facebook 消息框中的位置标签的事情，在我们打字时它总是紧挨着最后一个文本行。

我尝试使用两个内联 spans，但如您所见，位置标 checkout 现在文本 span 的右边框旁边。

没有任何 Javascript 来动态放置位置标签，是否可以做类似 Facebook 的事情？

看看this Fiddle

HTML:

<div>
    <span class="textarea" class="status" contenteditable="true">foo
foobarfoobar
bar</span>
    <span contenteditable="false"> — at Montréal</span>
</div>

CSS:

div{
    width: 190px; 
    border: 1px solid #dedee0;
    padding: 10px;
}

.textarea{
    white-space: pre-wrap;
    display: inline-block
}

.location{
  display: inline-block  
}

Answer 1

如果你只使用内联？:FIDDLE

.textarea{
    white-space: pre-wrap;
    display: inline;
}

.location{
  display: inline;
}