长文本应该被css隐藏答案

【问题标题】：Long text should be hidden by css长文本应该被css隐藏
【发布时间】：2018-03-22 14:41:30
【问题描述】：

我有这样的代码。 html:

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

css：

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

这里的问题是 H3 标签“Sometext”应该只写成“Somete”，但是溢出和文本溢出都没有帮助。 H3标签还是可以看到的。

【问题讨论】：

【解决方案1】：

请检查这个。

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

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

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

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

width: 70px; text-overflow: clip

【讨论】：