html - css 省略号不起作用：标题在多行上产生

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;    
}