文本溢出CSS截断(Text-overflow CSS truncation)

我最早是做动态使用JS ..但我们得到一些性能问题的Cuz，其中我们要拿出一个替代选项。

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

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

目前，这是我的文本截断看起来像

本文已真理的...

这里的三个点（...），有黑色的颜色，我想将其更改为红色。

有没有一种办法，我们可以做到这一点吗？

Answer 1:

在这里工作：

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

代码（HTML和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 。然后.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 ，这样你的文本不会对左边一侧的边缘。

祝好运！