将跨度放在可编辑div的最后一行旁边

Question

我尝试在Facebook消息框中执行类似于位置标签的操作，该消息框在我们输入时始终位于最后一个文本行的旁边。

我尝试使用两个内嵌spans，但正如您所见，位置标签显示在文本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;
}

Answer 2

在.textarea内，更改为display: inline;

另外，我不知道这是否是故意的，但你从未应用过＆＃34;位置＆＃34;等到第二个范围。