Question

早些时候我正在使用JS动态地进行它...但是我们遇到了一些性能问题，因为我们必须提供替代选项。

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

但如果有人可以解决它，我会遇到一个小问题

目前这是我的文本截断的样子

此文字已被删除...

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

我们有办法实现这一目标吗？

Answer 1

在这里工作：

http://jsfiddle.net/TReRs/4/

代码（HTML＆amp; CSS）：

<div class="overme">
    how much wood can a woodchuck chuck if a woodchuck could chuck wood?
</div>

CSS：

.overme {
    width: 300px;
    overflow:hidden; 
    white-space:nowrap; 
    text-overflow: ellipsis;
    color: red;
}

使用该基本CSS将尾随点/省略号显示为红色。

Answer 2

我假设你只想让圆点出现红色？不幸的是，简单的css是不可能的。但是我发现了一个能够创建自定义省略号样式的教程，只有在必要时才会显示：

https://www.mobify.com/dev/multiline-ellipsis-in-pure-css/

这是一个非常好的黑客，不容易用文字解释。也许我刚刚制作的这个jsfiddle可以帮到你：

http://jsfiddle.net/MyUQJ/9/

删除overflow: hidden;上的.wrap，看看发生了什么。主要思想是.end div在文本溢出时移动到.left-side中的左下角，而当.text div没有溢出时，.ellipsis移动到.end的右下角。然后<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> 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; }内的绝对位置，所以当你将它放在右边时，它会在文本溢出时显示，而当文本没有溢出时它会溢出！好笑，不是吗？

无论如何，这是原始代码：

HTML：

position: absolute;

CSS：

margin-left: -32px

当然，当你要实现它时，你想要删除所有边框和'结束'文本。我认为这是一个易于理解的例子。你也可能想给它一个.left-side然后给它{{1}}，其中宽度是{{1}}的宽度，所以你的文字在左边没有边距侧。

祝你好运！

Answer 3

**使用CSS的简便方法**

HTML

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

Css：

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

文本溢出CSS截断

3 个答案: