文本溢出 CSS 截断答案

【问题标题】：Text-overflow CSS truncation文本溢出 CSS 截断
【发布时间】：2013-02-23 22:06:59
【问题描述】：

之前我是使用 JS 动态进行的。但是我们遇到了一些性能问题，因为我们必须提供一个替代选项。

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

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

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

此文本已被截断...

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

有没有办法实现这一目标？

【问题讨论】：

标签： text truncate css

【解决方案1】：

在这里工作：

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

 .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 将尾随点/省略号涂成红色。

【讨论】：

如果这不起作用，请告诉我们您在哪个 Internet 浏览器上进行测试？

【解决方案2】：

**使用 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;
}

【讨论】：

【解决方案3】：

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

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

这是一个相当不错的 hack，而且不容易用语言来解释。也许我刚刚做的这个jsfiddle可以帮助你：

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

删除.wrap 上的overflow: hidden; 以查看发生了什么。主要思想是当文本溢出时.end div 移动到.left-side 的左下角，而当它没有溢出时它在.text 的右下角。然后.ellipsis div 绝对定位在相对.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;
}

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

祝你好运！

【讨论】：