文本溢出 CSS 截断
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15292708/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Text-overflow CSS truncation
提问by nipiv
Earlier i was doing it dynamically using JS.. but we were getting some performance issues cuz of which we have to come with an alternative option.
早些时候，我使用 JS 动态地做这件事……但是我们遇到了一些性能问题，因为我们必须提供替代选项。
I am now truncating a long text on my tab names using text-overflow style.
我现在使用文本溢出样式截断选项卡名称上的长文本。
but i have a small issue if some one can resolve it
但我有一个小问题，如果有人能解决的话
currently this is how my text truncation looks like
目前这是我的文本截断的样子
This text has been trun...
此文已删...
Here the three dots (...) comes in black colour and i want to change it to red.
这里的三个点 (...) 是黑色的，我想把它改成红色。
Is there a way that we can achieve this one?
有没有一种方法可以实现这一目标？
回答by
Works here:
在这里工作：
Code (HTML & CSS):
代码（HTML 和 CSS）：
<div class="overme">
how much wood can a woodchuck chuck if a woodchuck could chuck wood?
</div>
CSS:
CSS：
.overme {
width: 300px;
overflow:hidden;
white-space:nowrap;
text-overflow: ellipsis;
color: red;
}
Trailing dots/ellipsis are colored in red using that basic CSS.
使用该基本 CSS 将尾随点/省略号涂成红色。
回答by gitaarik
I assume you only want the dots to appear in red? Unfortunately this isn't possible with simple css. However I found a tutorial which manages to make a custom ellipsis style, that will only be displayed when it's necessary:
我假设您只希望点显示为红色？不幸的是，这对于简单的 css 是不可能的。但是我找到了一个教程，它设法制作自定义省略号样式，只有在必要时才会显示：
https://www.mobify.com/dev/multiline-ellipsis-in-pure-css/
https://www.mobify.com/dev/multiline-ellipsis-in-pure-css/
It's quite a nice hack and not easy to explain in words. Maybe this jsfiddle I just made can help you:
这是一个很好的黑客，不容易用文字解释。也许我刚刚制作的这个 jsfiddle 可以帮助你：
Remove the overflow: hidden;on the .wrapto see what's happening. The main idea is that the .enddiv moves to the left bottom in .left-sidewhen the text is overflowing, while when it's not overflowing it's on the right bottom of the .text. Then the .ellipsisdiv is positioned absolute inside the relative .end, so you when you position it to the right it's visible when the text is overflowing and it's overflowing when the text isn't overflowing! Funny, isn't it?
删除overflow: hidden;上的.wrap以查看发生了什么。主要思想是当文本溢出时.enddiv 移动到左下角.left-side，而当它没有溢出时它在.text. 然后.ellipsisdiv 被定位在绝对内相对.end，所以当你把它放在右边时，它在文本溢出时可见，当文本没有溢出时它溢出！很有趣，不是吗？
Anyway, here's the raw code:
无论如何，这是原始代码：
HTML:
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:
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;
}
Of course, when you're gonna implement this you want to remove all the borders and the 'end' text. I made this to be an easy to understand example. Also you probably want to give the wrap a position: absolute;and then give it margin-left: -32px, where the width is the width for the .left-side, so your text won't have a margin on the left side.
当然，当您要实现此功能时，您需要删除所有边框和“结束”文本。我把它变成了一个易于理解的例子。此外，您可能想给 wrap aposition: absolute;然后给它margin-left: -32px，其中宽度是 的宽度.left-side，因此您的文本不会在左侧有边距。
Good luck!
祝你好运！
回答by Er M. K. Gupta
**Easy Way to do with css **
**使用 css 的简单方法**
HTML
HTML
<div class="text-truncate">
The company's commitment to rebuilding the relationship with you, our community</div>
Css :
css :
.text-truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
