为什么无效，没有显示省略号

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        h1 {
            width: 300px;
            height: 20px;
            overflow: hidden;
        }

        span {
            text-overflow: ellipsis;
        }
    </style>
</head>

<body>
    <h1>
        <span>aaaaaaaaaaaa啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</span>
    </h1>
</body>

</html>

小小白的前进路 2019-12-20

源自：CSS3文本与字体 1-6 新文本属性（text-align-last和text-overflow）

收起

2回答

好帮手慕慕子回答被采纳获得+3积分 2019-12-20 19:06:57

同学你好，老师使用的是vscode编辑器，在官网（https://code.visualstudio.com/ ）直接下载安装即可。编辑器主要是辅助我们编程的，使用方式大致都是相同的， vscode用起来也很方便，咱们也有关于vscode编辑器的课程https://www.imooc.com/learn/1106 帮助同学快速上手。

如果帮助到了你，欢迎采纳，祝学习愉快~

收起回答

好帮手慕慕子 2019-12-20 17:41:36

同学你好，要给h1元素同时设置text-overflow和overflow属性才可以。

另，因为文字会自动换行，所以在宽度存放不下的时候，就自动换行了，但是出现省略号的效果，需要文字在一行显示才可以，但是这里换行了就不可以了。

建议：可以设置white-space: nowrap;属性，使其在一行中显示，适当增加高度，查看效果