Question

我创建了包含多个列的响应式页面。在示例中，我有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>

所以我的问题是：如何设置YELLOW列显示不超过120个字符？

Answer 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));
});

Answer 2

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

＆＃13;

$(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));
  }
});

＆＃13;

<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>

＆＃13;

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

2 个答案: