CSS 如何在 Bootstrap 列中使用文本溢出？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33165066/
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
How to use text-overflow inside Bootstrap column?
提问by Billy Logan
Suppose I have a row with fixed height and I inserted some text to its column. If it's too long I wanna it to be cut off and at the end of the line three dots supposed to be added like this:
假设我有一排高度固定，我在它的列中插入了一些文本。如果它太长，我希望它被切断，并在行尾添加三个点，如下所示：
I'm using text-overflow: ellipsis;attribute for this in my row but can't get it to work.
我正在使用文本溢出：省略号；属性在我的行中，但无法使其工作。
What am I doing wrong?
我究竟做错了什么？
HTML
HTML
<div class="container">
<div class="row text">
<div class="col-xs-4" style="border: solid">
Some really long text! Some really long text! Some really long text! Some really long text! The end! Some really long text! The end! Some really long text! The end! Some really long text! The end!
</div>
</div>
</div>
CSS
CSS
.row {
margin: 2px 0;
}
.text {
word-wrap: break-word;
height: 50px;
text-overflow: ellipsis;
}
回答by Noopur Dabhi
If you want to do this using css, then try below code :
如果您想使用 css 执行此操作，请尝试以下代码：
HTML :
HTML :
<div class="container">
<div class="row">
<div class="col-xs-4" style="border: solid">
<div class="text">
Some really long text! Some really long text! Some really long text! Some really long text! The end! Some really long text! The end! Some really long text! The end! Some really long text! The end!
</div>
</div>
</div>
</div>
CSS:
CSS：
.row {
margin: 2px 0;
}
.text {
display: block;
display: -webkit-box;
max-width: 400px;
height: 50px;
margin: 0 auto;
line-height: 1.2;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
Here is jsfiddle
这是jsfiddle
For understanding line clapming in css Line Clamping
用于理解 css Line Clamping 中的line clapming
回答by vaishali chawla
Define your CSS class and assign it to div where your are assigning col size like:-
定义您的 CSS 类并将其分配给您正在分配 col 大小的 div，例如：-
<div class="container">
<div class="row">
<div class="col-xs-4 trimText" style="border: solid">
Some really long text! Some really long text! Some really long text! Some really long text! The end! Some really long text! The end! Some really long text! The end! Some really long text! The end!
</div>
</div>
</div>
where "trimText" CSS is:-
其中“trimText”CSS 是：-
.trimText{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis
}
回答by Ranjana
Try it doing using js. It will show till 50 chars only. Updated fiddle is - http://jsfiddle.net/y6oatnzy/3/
尝试使用 js 做。它只会显示到 50 个字符。更新的小提琴是 - http://jsfiddle.net/y6oatnzy/3/
$(document).ready(function() {
var showChar = 50;
$('.more').each(function() {
var content = $(this).html();
if(content.length > showChar) {
var c = content.substr(0, showChar);
var h = content.substr(showChar-1, content.length - showChar);
var html = c + '..';
$(this).html(html);
}
});
});
