css实现一行显示，超出部分以省略号代替

最新推荐文章于 2024-09-25 08:35:37 发布

前端切图仔Zz

最新推荐文章于 2024-09-25 08:35:37 发布

阅读量3k

点赞数

分类专栏： css和html 文章标签：前端 html5 css css3

本文链接：https://blog.csdn.net/Amouzy/article/details/123337523

版权

css和html 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

没处理之前

在这里插入图片描述

设置样式

给被包含元素设置以下样式（这里的案例是p元素）：

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

效果：

在这里插入图片描述
明显，已经实现了只展示一行，超出部分以省略号代替

其中：

overflow: hidden;的作用是隐藏溢出部分
text-overflow: ellipsis;表示当文本溢出包含元素时，显示省略符号来代表被修剪的文本。
white-space: nowrap; 规定段落中的文本不进行换行，即意思是一行显示。

完整示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{margin: 0;padding: 0;}
        div{height: 40px;width: 300px;border: 1px solid #333;}
        p{
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    </style>
</head>
<body>
    <div>
        <p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
    </div>
</body>
</html>