p标签内实现第二行多余内容省略显示

最新推荐文章于 2024-07-24 10:40:16 发布

麦乐乐

最新推荐文章于 2024-07-24 10:40:16 发布

阅读量6.9k

点赞数

本文链接：https://blog.csdn.net/qq_41831345/article/details/80636139

版权

p标签需要固定宽高

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width='device-width', initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    p{
        height: 40px;
        width:200px;
        overflow: hidden;
        /* white-space: nowrap; */
        text-overflow: ellipsis;
        -webkit-line-clamp:2;
        word-break:break-all;
        display:-webkit-box;
        -webkit-box-orient:vertical;
    }
</style>
<body>
    <p>几乎都是负担看到老师发还是肯定会发生还是看回放还是看了回复你不看精彩的</p>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width='device-width', initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
</head>
<style>
	p {
		height: 40px;
		width:200px;
		overflow: hidden;
		/* white-space: nowrap; */
		text-overflow: ellipsis;
		-webkit-line-clamp:2;
		word-break:break-all;
		display:-webkit-box;
        -webkit-box-orient:vertical;
    }
    p::after{
        content:'...'
    }
</style>
<body>
    <p><span>几乎都是负担看到老师发还是肯定会发生还是看回放还是看了回复你不看精彩的</span></p>
    <p><span>几乎都是负放还是看了回复你不看精彩的</span></p>
</body>
</html>