2

I am trying to trim text/string only when on mobile using jQuery. Here is a Bootstrap driven example where the trim works well using this method: http://jsfiddle.net/Yatko/XfuHz/

The goal is to have the trim activated only when on mobile phones (col-xs-) @media (max-width: 767px)

... or to have a two step trim based on screen size

  • trim at 12 when on tablet @media (min-width: 768px) and (max-width: 991px)
  • trim at 6 when on phone @media (max-width: 767px)

HTML

<div class="row">
    <div class="col-xs-6 col-sm-4 col-lg-2 limit"><a href>lorem ipsum </a></div>
    <div class="col-xs-6 col-sm-4 col-lg-2 limit"><a href>dolor sit amet </a></div>
    <div class="col-xs-6 col-sm-4 col-lg-2 limit"><a href>consectetur </a></div>
    <div class="col-xs-6 col-sm-4 col-lg-2 limit"><a href>adipisicing elit </a></div>
    <div class="col-xs-6 col-sm-4 col-lg-2 limit"><a href>sed do eiusmod tempor </a></div>
    <div class="col-xs-6 col-sm-4 col-lg-2 limit"><a href>incididunt ut labore </a></div>
    <div class="col-xs-6 col-sm-4 col-lg-2 limit"><a href>et dolore magna aliqua </a></div>
</div>

jQuery

$(function(){
  $(".limit").each(function(i){
    len=$(this).text().length;
    if(len>10)
    {
      $(this).text($(this).text().substr(0,10)+'...');
    }
  });       
});
Community
  • 1
  • 1
Yatko
  • 8,715
  • 9
  • 40
  • 46
  • 1
    Are you perhaps looking for the CSS `text-overflow: ellipsis` property? – MightyPork Jul 13 '14 at 16:22
  • Yes, that is probably the best solution in most cases but sometimes just not enough or won't fit specific situations, this is why I was thinking to use jQuery instead. – Yatko Jul 13 '14 at 16:38

0 Answers0