📝 代码查看
3
查看次数
2025-11-03
创建时间
2025-11-04
最后更新
<div class="g-container">
<p>Lorem ipsum dolor, sit amet xxxxx ddddd lorem ipsum </p>
</div>
<div class="g-container">
<p>Lorem ipsum dolor, sit amet <span>xxxxx</span> <span>ddddd</span> <span>lorem</span> ipsum </p>
</div>
<div class="g-container inlineblock">
<p>Lorem ipsum dolor, sit amet <span>xxxxx</span> <span>ddddd</span> <span>lorem</span> ipsum </p>
</div>html, body {
width: 100%;
height: 100%;
display: flex;
}
div {
margin: auto;
width: 310px;
height: 75px;
border: 2px solid #999;
padding: 10px;
}
p {
line-height: 24px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
p span {
padding: 0 2px;
border: 2px solid pink;
border-radius: 5px;
background: pink;
}
.inlineblock span {
display: inline-block;
}
p:after {
content: " ";
display: block;
width: 0;
}
暂无JavaScript代码