文本溢出CSS截断

Question

早些时候我使用JS动态地执行它，但是我们遇到了一些性能问题，因此我们必须使用其他选项。

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

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

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

本文已真理的...

这里三点（...）出现黑色，我想将其更改为红色。

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

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/

在.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的宽度，所以您的文本左侧没有空白。

祝你好运！