长文本应该被css隐藏

Question

我有这样的代码。 HTML：

<div>
    <h3>Sometext</h3>
</div>

css：

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

这里的问题是H3标签“Sometext”应该只写为“Somete”，但溢出和文本溢出都无济于事。还可以看到H3标签。

Answer 1

请检查一下。

＆＃13;

＆＃13;

h3 {   
    width: 70px;  
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;    
}

＆＃13;

<div>
    <h3>Sometext</h3>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

使用text-overflow：clip;和宽度为h3

＆＃13;

＆＃13;

h3 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
    width: 59px;
}

＆＃13;

<div>
    <h3>Sometext</h3>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

文本溢出：省略号对我来说也很好，但你的宽度为20px，显示带有三个省略号点（...）的文本。这就是为什么它只显示简单......

只需增加70px的宽度就可以了。当你提到隐藏溢出时，你就不需要指定text-overflow: clip。

width: 70px; text-overflow: clip