Html 使用span的Facebook风格的消息气泡

我正在使用一个

和

来显示一串类似facebook上的消息。我使用span是因为我只希望消息的长度具有背景色和边框。我试着在li内以auto的宽度做一个div，并使用

标记来实现这一点，但到目前为止，只有span在做这件事。但是，当线断开时，跨度如下所示：

HTML

<ul>    
    <li class = "msg_list" data-soyid = "{{$message->user_id}}">
        <div style = "width: auto" class = "fl_bx">
           <section>
                <span>
                        {{$message->body}}
                </span>
            </section>
        </div>
    </li>
</ul>

---

因为span不是块元素，所以应该将此CSS规则添加到span:

display:inline块

请在此处尝试：


.msg\u列表{
边缘顶部：5px；
边缘底部：10px；
}
.msg_list.msg{
填充：3倍；
背景：米色；
边界半径：5px；
边框：1px纯黑；
显示：内联块；
}
.user\u聊天室{
文本对齐：右对齐；
}
.response_chat{
文本对齐：左对齐；
}


非常长的线。

您能否发布一个JSFIDLE和/或您试图复制的功能的屏幕截图？Facebook聊天泡泡在手机、桌面和你使用的移动操作系统之间看起来是不同的。每天学习新事物。谢谢你，克里斯
.msg_list{
    margin-top: 5px;
    margin-bottom: 10px;
}
.msg_list span{
    padding: 3px;
    background: beige;
    border-radius: 5px;
    border: 1px solid black;
}

.user_chat{
    text-align: right;
}
.response_chat{
    text-align: left;
}