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

Question

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

如果标题不适合一行，我希望它被截断。但就我而言，即使添加了text-overflow：省略号标记，标题也会生成多行。如何让它只停留在一行并截断

Answer 1

您必须将text-overflow: ellipsis;属性与white-space: nowrap;以及overflow属性结合使用，该属性必须是除可见之外的其他属性。 请尝试以下方法：

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