Question

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

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>

Answer 2

这是因为text-overflow: ellipsis仅适用于直接后代文本节点。因此，您还应该将相同的样式应用于h4选择器，以达到相同的效果。

我不建议将h4设置为display: inline，因为这意味着您将不得不在其后手动插入空格。

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

h4 {
  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 3

与span不同，h4是块级元素，因此需要对其应用文本溢出。溢出相同：。

此属性指定当内嵌内容溢出时，在其其块容器元素（以下简称“块”）的内嵌行进方向上，其结束行框边缘呈现的效果。 ^ref

div {
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
h4 {
    text-overflow: inherit;
    overflow: inherit;
    /* no need to inherit white-space because it inherited by default */
}

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

Answer 4

h4是一个块元素，因此请在该元素中分配文本溢出，而不是在div中。

h4, span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width:100%;
  display:inline-block;
}
div {
    width: 200px;
}

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

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

4 个答案: