html - 文本溢出省略号不适用于标题标签

Question

为什么标题标签溢出时不显示省略号？如何显示 header 标签的省略号？

div {
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

<div>
   <h4>Ellipsis does not work with header tags</h4>
   <span>Ellipsis does work with span tags</span>
</div>

Answer 1

尝试添加

h4 {
    display: inline;
}

你会看到它按预期工作

div {
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

h4 {
    display: inline;
}

<div>
   <h4>Ellipsis does not work with header tags</h4> <br>
   <span>Ellipsis does work with span tags</span>
</div>