title: Limit text length on mobile, responsive (trim text/string) jQuery, CSS3, Bootstrap
body: <p>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 <a href="https://stackoverflow.com/a/11208297/1951635">this</a> method: <a href="http://jsfiddle.net/Yatko/XfuHz/" rel="nofollow noreferrer">http://jsfiddle.net/Yatko/XfuHz/</a></p>
  
  <p>The goal is to have the trim activated only when on mobile phones (col-xs-) @media (max-width: 767px)</p>
  
  <p>... or to have a two step trim based on screen size</p>
  
  <ul>
  <li>trim at 12 when on tablet @media (min-width: 768px) and (max-width: 991px)</li>
  <li>trim at 6 when on phone @media (max-width: 767px)</li>
  </ul>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div class="col-xs-6 col-sm-4 col-lg-2 limit"&gt;&lt;a href&gt;lorem ipsum &lt;/a&gt;&lt;/div&gt;
      &lt;div class="col-xs-6 col-sm-4 col-lg-2 limit"&gt;&lt;a href&gt;dolor sit amet &lt;/a&gt;&lt;/div&gt;
      &lt;div class="col-xs-6 col-sm-4 col-lg-2 limit"&gt;&lt;a href&gt;consectetur &lt;/a&gt;&lt;/div&gt;
      &lt;div class="col-xs-6 col-sm-4 col-lg-2 limit"&gt;&lt;a href&gt;adipisicing elit &lt;/a&gt;&lt;/div&gt;
      &lt;div class="col-xs-6 col-sm-4 col-lg-2 limit"&gt;&lt;a href&gt;sed do eiusmod tempor &lt;/a&gt;&lt;/div&gt;
      &lt;div class="col-xs-6 col-sm-4 col-lg-2 limit"&gt;&lt;a href&gt;incididunt ut labore &lt;/a&gt;&lt;/div&gt;
      &lt;div class="col-xs-6 col-sm-4 col-lg-2 limit"&gt;&lt;a href&gt;et dolore magna aliqua &lt;/a&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>jQuery</p>
  
  <pre><code>$(function(){
    $(".limit").each(function(i){
      len=$(this).text().length;
      if(len&gt;10)
      {
        $(this).text($(this).text().substr(0,10)+'...');
      }
    });       
  });
  </code></pre>