给每个跨度一个单独的行高?

时间:2015-08-18 06:41:37

标签: html css

我正在创建一个小型聊天应用程序。聊天气泡是用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,以便聊天气泡呈现出漂亮的外观。
但问题是当跨度有更多的文本,超过父div line-height时,其他跨度会受到影响。 JSFIDDLE
谁能帮我吗?谢谢你。

1 个答案:

答案 0 :(得分: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/