如何设置最大列大小（一行显示不超过 120 个字符？答案

【问题标题】：How can I set max columns size (display no more then 120 characters in line?如何设置最大列大小（一行显示不超过 120 个字符？
【发布时间】：2017-09-15 02:32:09
【问题描述】：

我创建了包含多个列的响应式页面。在示例中，我有 3 列：红、黄、蓝

设置大显示分辨率页面的方法是，将最大字符设置为相同的数字吗？

<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 个字符？

【问题讨论】：

标签： css twitter-bootstrap twitter-bootstrap-3 responsive-design

【解决方案1】：

您不能限制 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));
});

【讨论】：

【解决方案2】：

为了更加灵活，您可以将此自定义属性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>

【讨论】：