文字溢出用省略号效果

最新推荐文章于 2024-01-23 10:12:28 发布

YLSkye

最新推荐文章于 2024-01-23 10:12:28 发布

阅读量131

点赞数

分类专栏：前端重学之路---CSS 文章标签： css css3

本文链接：https://blog.csdn.net/qq_22113627/article/details/107469749

版权

前端重学之路---CSS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

文字溢出用省略号显示实现方法

- 单行文字
- 多行文字

单行文字

核心的3个声明：

.ell{
	text-overflow:ellipsis;
	white-space:nowrap;
	overflow:hidden;
}

多行文字

.ellM{
            height: 40px;
            width: 200px;
            overflow: hidden; /*超出文本隐藏*/
            text-overflow:ellipsis; /*超出部分省略号显示*/
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2; /*自定义行数*/
        }

效果图：
在这里插入图片描述

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文字溢出后用省略号表示</title>
    <style>
        .ell{
            height: 20px;
            width: 200px;
            background-color: antiquewhite;
            text-overflow:ellipsis;
            overflow: hidden;
            white-space: nowrap;
        }
        .ellM{
            height: 40px;
            width: 200px;
            background-color: #c8c8db;
            overflow: hidden; /*超出文本隐藏*/
            text-overflow:ellipsis; /*超出部分省略号显示*/
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2; /*自定义行数*/
        }
    </style>
</head>
<body>
    <h3>单行文字溢出省略号效果</h3>
    <div class="ell">
        一个人想像自己不懂得的事很容易浪漫。
    </div>
    <br>
    <h3>最多显示2行内容，之后用省略号</h3>
    <div class="ellM">
        我对自己的要求很低:我活在世上,无非想要明白些道理,遇见些有趣的事。倘能如我愿,我的一生就算成功。
    </div>
</body>
</html>

YLSkye

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
文字溢出用省略号效果

文字溢出用省略号显示实现方法单行文字多行文字单行文字核心的3个声明：.ell{ text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}多行文字.ellM{ height: 40px; width: 200px; overflow: hidden; /*超出文本隐藏*/ text-overflow:ellipsis; /*超出部
复制链接

扫一扫

专栏目录