单行文本溢出显示省略号

如果可以，可以如果

已于 2022-11-19 14:46:50 修改

阅读量2.2k

点赞数 1

文章标签： css3 css html

于 2022-03-15 20:55:09 首次发布

本文链接：https://blog.csdn.net/qq_43687594/article/details/123511873

版权

写页面的时候会经常看见一行文本后面跟了省略号，其实不是文本后面直接写…实现的，而是当文本超出了页面显示的宽度时，自动显示省略号。
案例：实现文本超出一行后，其余内容显示省略号
下图是初始效果图

在这里插入图片描述
给父元素添加以下属性：

white-space: nowrap；表示不让文本换行，强制在一行中显示所有的文本
overflow:hidden;超过容器宽度后隐藏，即溢出隐藏
text-overflow:ellipsis;超出文本显示省略号

注意：这三个属性要配合使用才能实现单行文本溢出隐藏
完整代码：

<!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>
        .box{
            width: 200px;
            background-color: pink;
            /* 不设置高度的时候，高度由内容撑开 */
            white-space: nowrap;/* 强制文本在一行中显示 */
            overflow: hidden;/* 溢出隐藏*/
            text-overflow: ellipsis;/* 文本超出后显示省略号*/
        }
    </style>
</head>
<body>
    <div class="box">
        我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本
    </div>
</body>
</html>

最终效果图：
在这里插入图片描述
--------------------------------------------------补充-----------------------------------------
溢出显示省略号，一般我们会需要鼠标移上去的时候，显示完整的内容，其实代码原本就有这个功能，那就是给标签添加title标签，将要显示的全部内容放在title标签中即可。
鼠标移上去显示小手标识，给标签添加cursor: pointer;即可