CODEWITHSUNDEEP
csstwitter-bootstraptwitter-bootstrap-3responsive-design
Grene
Grene

Reputation: 434

How can I set max columns size (display no more then 120 characters in line?

I create responsive page with several column. In example I have 3 columns: RED, YELLOW, BLUE

Is the way to set then page in big display resolution, set max characters to same number? 

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

So my question is: How to set YELLOW column to display no more then 120 characters in line?

Upvotes: 1

Views: 80

Answers (2)

brian17han
brian17han

Reputation: 1279

To be more flexible, you can add this custom attribute data-limit to your element. Then assign the character count limit to data-limit. The following example uses 3 as the limit, you can change it to the number you need.

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

Upvotes: 1

Vald
Vald

Reputation: 237

You can't limit the number of characters in CSS. The correct way is to use the max-width property.

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

If you really want to limit the number of characters to 120, you can do it in JS.

With jQuery : 

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

Upvotes: 3

Related Questions