限制文本长度在移动，响应（修剪文本/字符串）jQuery，CSS3，Bootstrap

Question

我正在尝试使用jQuery在移动设备上修剪文本/字符串。这是一个Bootstrap驱动的示例，其中使用this方法可以很好地进行修剪：http://jsfiddle.net/Yatko/XfuHz/

目标是仅在手机（col-xs-）@media（最大宽度：767px）

时激活微调

...或根据屏幕尺寸进行两步修剪

在平板电脑@media（最小宽度：768px）和（最大宽度：991px）时，
• 在12处修剪
• 在手机@media（最大宽度：767px）
时修剪为6

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)+'...');
    }
  });       
});