长文本应隐藏 css

Question

我有这样的代码。 html:

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

css:

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

这里的问题是 H3 标签 "Sometext" 应该只写成 "Somete" 但 overflow 和 text-overflow 都没有帮助。还是可以看到h3标签。

Answer 1

使用文本溢出：剪辑；宽度为 h3

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

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

Answer 2

请检查这个。

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

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

Answer 3

text-overflow: 省略号对我来说也很好用，但是你 decleare 宽度 20px 太小了，无法显示带有三个省略号点 (...) 的文本。这就是为什么它只显示简单的 ...

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

width: 70px; text-overflow: clip

Long text should be hidden by css