html - css 省略号不起作用 : heading spawns on multiple lines

Question

我希望页面中的标题 (h4) 使用椭圆在一行中截断。所以 h4 在 bootstrap span4 标签内。

如果标题不适合一行，我希望将其截断。但就我而言，即使在添加了 text-overflow:ellipsis 标签之后，标题也会生成多行。我如何让它只停留在一行上并截断

Answer 1

您必须将 text-overflow: ellipsis; 属性与 white-space: nowrap; 以及 overflow 结合使用> 属性必须是可见以外的东西。 尝试以下操作:

h4{
    width: 40px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;    
}