51

早些时候我是使用 JS 动态地做的。但是我们遇到了一些性能问题，因为我们必须提供一个替代选项。

我现在使用文本溢出样式截断标签名称上的长文本。

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

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

这段文字已经转...

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

有没有一种方法可以实现这一目标？

4

3 回答 3

113

在这里工作：

 .overme {
        width: 300px;
        overflow:hidden; 
        white-space:nowrap; 
        text-overflow: ellipsis;
        color: red;
    }
 <div class="overme">
        how much wood can a woodchuck chuck if a woodchuck could chuck wood?
    </div>

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

于 2013-03-08T11:27:45.840 回答
4

**使用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;
}
于 2020-02-25T05:28:37.067 回答
3

我假设您只希望点显示为红色？不幸的是，这对于简单的 CSS 是不可能的。但是我发现了一个教程，它设法制作自定义省略号样式，只有在必要时才会显示：

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

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

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

删除overflow: hidden;上的.wrap，看看发生了什么。主要思想是，当文本溢出时， .enddiv 移动到左下角.left-side，而当它没有溢出时，它在.text. 然后.ellipsisdiv 被定位在 relative.end中，所以当你把它放在右边时，当文本溢出时它是可见的，当文本没有溢出时它是溢出的！有趣，不是吗？

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

HTML：

<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>

CSS：

.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;
}

当然，当您要实现此功能时，您希望删除所有边框和“结束”文本。我把它作为一个易于理解的例子。此外，您可能想给 wrap aposition: absolute;然后给它margin-left: -32px，其中宽度是 的宽度.left-side，因此您的文本在左侧不会有边距。

祝你好运！

于 2013-03-08T12:25:14.210 回答