长文本应该被css隐藏

Posted 2023-05-07

【中文标题】长文本应该被css隐藏

【英文标题】：Long text should be hidden by 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标签还是可以看到的。

【问题讨论】：

我不太明白你想要什么..你想让它显示“Somete”但你不知道它是什么..你能解释清楚吗？

我的意思是这个div里面有div和h3。如果文本不适合 div 的特殊宽度，我想隐藏此文本的最后 3 个单词（可以放入）并替换为“...”

text-overflow: ellipsis not working的可能重复

【参考方案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>

【讨论】：

然后你使用 text-overflow: ellipsis;但它会显示一些...使用宽度 72px

【参考方案3】：

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

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

width: 70px; text-overflow: clip