html - 给每个跨度一个单独的行高？

Question

我正在创建一个小型聊天应用程序。聊天气泡是用 span 制作的。这是聊天气泡的 CSS:

user1
{
    float: right;
    margin-right: 20px;
    background: #4696E6;
    padding:7px;
    z-index:0;
    line-height: 10px;
    border-radius: 5px;
    max-width:80%;
    align-content:space-around; 
    line-height:15px;
    font-size:15px;
    word-break: break-all;
    -webkit-filter: drop-shadow(3px 3px 3px #222);
    filter:         drop-shadow(3px 3px 3px #222);
    margin-top:10px;
}

我给父 div 一个 line-height，这样聊天气泡就可以很好地呈现。
但问题是，当一个 span 包含更多文本，超过父 div 的 line-height 时，其他 span 会受到影响。 JSFIDDLE
谁能帮我吗？谢谢你。

Answer 1

将 id 更改为 class 并使用它。注意 clear:right;

.user1
{
    clear:right;
    float: right;
    margin-right: 20px;
    background: #4696E6;
    padding:7px;
    z-index:0;
    line-height: 10px;
    border-radius: 5px;
    max-width:80%;
    align-content:space-around; 
    line-height:15px;
    font-size:15px;
    word-break: break-all;
    -webkit-filter: drop-shadow(3px 3px 3px #222);
    filter:         drop-shadow(3px 3px 3px #222);
    margin-top:10px;
}

http://jsfiddle.net/gqcckaxL/