我正在创建一个小型聊天应用程序。聊天气泡是用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
谁能帮我吗?谢谢你。
答案 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;
}