如何设置最大列大小（显示没有更多然后120个字符的行

创建响应页面数列的例子，我有3列：？红，黄，蓝如何设置最大列大小（显示没有更多然后120个字符的行

是设置方式然后在大显示器分辨率页面，设置最多字符数相同

<div class="container-fluid"> 
<div class="row"> 
    <div class="col-xs-4 panel" style="background-color: red"> 
     RED 
    </div> 
    <div class="col-xs-4 panel" style="background-color: yellow"> 
     YELLOW 
    </div> 
    <div class="col-xs-4 panel" style="background-color: blue"> 
     BLUE 
    </div> 
</div> 
</div>

所以我的问题是：？？如何设置黄色列中显示没有更多然后120个字符的行

来源

2017-09-14 Grene

您不能限制CSS中的字符数。正确的方法是使用max-width属性。

.panel { 
    max-width: 200px; // Or what you want 
    text-overflow: ellipsis; 
    white-space: nowrap; 
    overflow: hidden; 
}

如果你真的想限制字符数为120，你可以用JS做。

使用jQuery：

$(".panel").each(function() { 
    $(this).text($(this).text().substring(0,120)); 
});

来源

2017-09-14 18:10:52 Vald

更灵活，可以将此自定义属性data-limit添加到您的元素。然后将字符数量限制分配给data-limit。以下示例使用3作为限制，您可以将其更改为您需要的数字。

$(document).ready(function() { 
 
    var divs = $('div[data-limit]'); 
 
    var limit = parseInt(divs.attr("data-limit")); 
 
    var originalText = divs.text().trim(); 
 
    if (originalText.length > limit) { 
 
    divs.text(originalText.substring(0, limit)); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container-fluid"> 
 
    <div class="row"> 
 
    <div class="col-xs-4 panel" style="background-color: red"> 
 
     RED 
 
    </div> 
 
    <div class="col-xs-4 panel" style="background-color: yellow" data-limit="3"> 
 
     YELLOW 
 
    </div> 
 
    <div class="col-xs-4 panel" style="background-color: blue"> 
 
     BLUE 
 
    </div> 
 
    </div> 
 
</div>

来源

2017-09-14 18:32:09 brian17han

如何设置最大列大小（显示没有更多然后120个字符的行

回答

相关问题