Html 将背景设置为与文本一样宽，并在换行后向左对齐

这是一个聊天盒示例，我希望

span.p

元素位于右侧，我还希望背景与文本一样宽：

<div id="msgWindow" class="block">
<div id="messages">
<p class="sysmsg">You're now connected with a random chat partner...</p>
<p class="sysmsg">Say Hello!</p>
<p class="msg-item"><span class="you">hi</span></p>
<p class="msg-item"><span class="you">this is a long woooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooord</span></p>
</div>
</div>

但换行后文本不会左对齐，而且背景也不会仅为文本设置

这是我所说内容的演示：

---

任何帮助都将不胜感激

如果我把你的问题读对了，你希望有一个大小可变的右浮动文本框，文本左对齐。您可以尝试以下方法：

.msg-item{
  clear: both; // <-- one msg item per row
}
span.you{    
    float:right; // <-- right floated text box
    max-width: 40%; // <-- up to 40% of parent div
    text-align: left; // <-- text is left-aligned
    margin-left: 60%;
    background-color: #555;
    word-wrap: break-word;
    direction: rtl;
}

.msg项目{
清楚：两者都是；//你的问题并不完全清楚你在问什么，但我认为这就是你想要的：

在msgWindow div上，放入
display:inline block
。在span.you类中，将
textAlign:right
更改为
textAlign:left

.msg-item{
  clear: both; // <-- one msg item per row
}
span.you{    
    float:right; // <-- right floated text box
    max-width: 40%; // <-- up to 40% of parent div
    text-align: left; // <-- text is left-aligned
    margin-left: 60%;
    background-color: #555;
    word-wrap: break-word;
    direction: rtl;
}