要求: 文字一行展示, 如果展示不开, 显示省略号
/* 电脑端 */
p{
height: 36px;
line-height: 36px;
display: block;
overflow: hidden;
text-overflow: ellipsis;
-ms-text-overflow: ellipsis;
white-space:nowrap;
}
/* 移动端 */
p{
overflow: hidden;
text-overflow: ellipsis;
-ms-text-overflow: ellipsis;
display: box;
display: -webkit-box;
line-clamp: 1;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
3.png
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
p{
font-size: 20px;
background-color: teal;
width: 150px;
}
/* 电脑端 */
#div1 p{
height: 36px;
line-height: 36px;
display: block;
overflow: hidden;
text-overflow: ellipsis;
-ms-text-overflow: ellipsis;
white-space:nowrap;
}
/* 移动端 */
#div2 p{
overflow: hidden;
text-overflow: ellipsis;
-ms-text-overflow: ellipsis;
display: box;
display: -webkit-box;
line-clamp: 1;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
</style>
</head>
<body>
<div id="div0">
<p>这是要显示的数字0123456789</p>
</div>
<div id="div1">
<p>这是要显示的数字0123456789</p>
</div>
<div id="div2">
<p>这是要显示的数字0123456789</p>
</div>
</body>
</html>
网友评论