Text 文本溢出CSS截断

早些时候，我使用JS动态地做这件事。。但我们遇到了一些性能问题，因为我们必须提供一个替代方案

我现在正在使用文本溢出样式截断选项卡名称上的长文本

但我有一个小问题，如果有人能解决它

目前，我的文本截断就是这样的

此文本已被复制…

这里的三个点（…）是黑色的，我想把它改成红色

有什么方法可以实现这个目标吗？在这里工作：

.overme{
宽度：300px；
溢出：隐藏；
空白：nowrap；
文本溢出：省略号；
颜色：红色；
}

如果一只土拨鼠能扔木头，它能扔多少木头？

我想你只希望点显示为红色？不幸的是，这是不可能与简单的css。但是，我发现了一个教程，该教程成功地创建了一个自定义省略号样式，只有在必要时才会显示该样式：

这是一个很好的技巧，不容易用语言解释。也许我刚做的这个JSFIDLE可以帮助你：

移除

溢出：隐藏.wrap

上单击code>，查看发生了什么。其主要思想是，当文本溢出时，

.end

div移到

.left side

的左下角，而当文本未溢出时，div移到

.text

的右下角。然后，

.ellipsis

div被绝对定位在相对的

.end

中，因此当您将其定位到右侧时，文本溢出时它是可见的，当文本未溢出时它是溢出的！很有趣，不是吗

无论如何，以下是原始代码：

HTML:

当然，当你要实现这一点时，你需要删除所有的边框和“结束”文本。我将此作为一个易于理解的示例。此外，您可能还希望给包装一个

位置：绝对

然后给它

左边距：-32px

，其中宽度是

左边距的宽度。这样，文本的左边就没有边距了

祝你好运
 **使用css的简单方法**

HTML

如果这不起作用，请告诉我们您正在测试哪个Internet浏览器？
<div class="wrap">
    <div class="left-side"></div>
    <div class="text">
        This is a short story, it 
        doesn't need to be ellipsed.
    </div>
    <div class="end">
        end
        <div class="ellipsis">...</div>
    </div>
</div>

<br>
<br>
<br>
<br>

<div class="wrap">
    <div class="left-side"></div>
    <div class="text">
        This is a long story. You won't be able to 
        read the end of this story because it will 
        be to long for the box I'm in. The story is 
        not too interesting though so it's good you 
        don't waste your time on this.
    </div>
    <div class="end">
        end
        <div class="ellipsis">...</div>
    </div>
</div>

.wrap {
    height: 100px;
    width: 234px;
    border: solid 1px #000;
    overflow: hidden;
}

.left-side {
    float: left;
    width: 32px;
    height: 100px;
    background: #F00;
}

.text {
    float: right;
    border: solid 1px #0F0;
    width: 200px;
}

.end {
    position: relative;
    float: right;
    width: 30px;
    border: solid 1px #00F;
}

.ellipsis {
    position: absolute;
    top: -25px;
    left: 198px;
    background: white;
    font-weight: bold;
    color: #F0F;
}

<div class="text-truncate">
The company’s commitment to rebuilding the relationship with you, our community</div>

.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}