用纯css隐藏字符串中的最后一个字符[关闭]答案

【问题标题】：Hide last character in string with pure css [closed]用纯css隐藏字符串中的最后一个字符[关闭]
【发布时间】：2020-09-03 23:28:08
【问题描述】：

是否可以在纯 css 中删除或简单地隐藏字符串中的最后一个字符？

当我搜索这个时，我发现的只是 javascript / jQuery 解决方案。

提前谢谢你。

【问题讨论】：

Change last letter color 的可能重复项
可以在其间加一个span标签

标签： css

【解决方案1】：

使用 CSS3 text-overflow。

(More information about text-overflow)

Live demo on jsfiddle

CSS：

#txt{
    position:relative;
    padding:7px;
    text-align:justify;
    background:#e7e7e7;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

工作：（最新版本）

火狐
铬
歌剧
即（没关系：D）

【讨论】：

您也可以将width 添加到#txt ;)
这对我不起作用，所以我有其他解决方案，以防有人遇到这个问题。我创建了 :after 伪元素并将这个 css 添加到它：content: ""; display: inline-block; position: relative; right: 5px; top: 4px; background-color: red; width: 10px; height: 1em;。您可能需要调整位置并将red 替换为您的背景颜色。

【解决方案2】：

据我所知，使用纯 CSS 是不可能的；有一个 ::first-letter 选择器，但没有 ::last-letter。相反，您可以使用标签来衬托文本其余部分的最后一个字母。

【讨论】：