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

没处理之前

在这里插入图片描述

设置样式

给被包含元素设置以下样式(这里的案例是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>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容