【mark】单/多行文本内容溢出显示省略号...

最新推荐文章于 2022-05-30 00:03:46 发布

iuukai

最新推荐文章于 2022-05-30 00:03:46 发布

阅读量134

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/weixin_45389633/article/details/104347347

版权

CSS 专栏收录该内容

22 篇文章 1 订阅

订阅专栏

👉传送门：单行文字、多行文字溢出时省略号表示的多种解决方式；调整字符间距；段落首字母大写缩进效果；

🅰单行

	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.test1 p {
    width: 200px;
    height: 50px;
    overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.test2 p {
    width: 200px;
    height: 50px;
	overflow: hidden;
	text-overflow: ellipsis;
}
</style>
</head>
<body>
    <div class="container">
        <div class="test1">
            <p>亮晶晶的春雨，像一群天真烂漫的娃娃，在高空中云集，嬉戏而下，咿咿呀呀，欢蹦乱跳地扑进大地母亲的怀抱。</p>
        </div>
        <div class="test2">
            <p>生命中最宝贵的东西，她叫“亲情”。每个人一生下来就自然拥有而习以为常，有时，我们在不经意中就失落了这与生俱有的宝贵财富。拥有亲情的人生是完美的，没有亲情的人生是残缺的，而拥有亲情却不珍爱的人生是遗憾的人生，更是可悲的人生。</p>
        </div>
    </div>
</body>
</html>

🅱多行

    overflow: hidden;
    text-overflow: ellipsis;
    
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.test1 p {
    width: 200px;
    height: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.test2 p {
    width: 200px;
    height: 45px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
</style>
</head>
<body>
    <div class="container">
        <div class="test1">
            <p>亮晶晶的春雨，像一群天真烂漫的娃娃，在高空中云集，嬉戏而下，咿咿呀呀，欢蹦乱跳地扑进大地母亲的怀抱。</p>
        </div>
        <div class="test2">
            <p>生命中最宝贵的东西，她叫“亲情”。每个人一生下来就自然拥有而习以为常，有时，我们在不经意中就失落了这与生俱有的宝贵财富。拥有亲情的人生是完美的，没有亲情的人生是残缺的，而拥有亲情却不珍爱的人生是遗憾的人生，更是可悲的人生。</p>
        </div>
    </div>
</body>
</html>