html - 如何截断html页面上的文本

Question

我有一些并排在四列上的文本，我想将它们截断为相等。

例如，我需要截断 50 个符号上的文本，以便使所有列都等于高度。

我找到了一个解决方案，但效果不佳，因为 HTML 是自举的，文本会一个接一个地出现

.feature_content p {
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

Answer 1

点点点点？？同样的事情可以用 5 行 JS/JQUERY 来完成。答案在下面，带有 JSFiddle 链接。

JSFiddle 链接:http://jsfiddle.net/q8v2kywn/

JS

$( document ).ready(function() {

$(".column").each(function() {
    var theContent = $(this).html();
    var how_short_you_want_it = theContent.substr(0, 150);
    //alert(how_short_you_want_it);
    $(this).html(how_short_you_want_it+'...');
});//close each function

});

CSS

.column{
    float:left;
    border:solid 1px #000;
    width:20%;
    margin-right:10px;
    padding:5px;
}

HTML

<div class="column">put your text here</div>
<div class="column">put your text here</div>
<div class="column">put your text here</div>
<div class="column">put your text here</div>