效果图就是这样：

 中间这个大标题，在pc端屏幕宽的时候在一行展示，是一行文字，到了移动端这里换行了，但是却要下面一行文字比上面一行长。

我想的第一个办法就是插入换行符，这样文字还没有占满宽度的时候强制换行，那么被挤下去的第二行必然字符更多，可以达到这个效果。具体的实现步骤如下：

1.获取屏幕宽度及字符串

2.遍历字符串，在合适的长度后插入<br />，

  var p_title = $('#blog_title').text();

     $(window).on("resize", function() {
          if ($(this).width() < 480) {     // 宽度小于480时执行的函数
              getNewline（p_title,20）
          }
      });

      function getNewline(val, num) {
              var str = val;
              var number = num;
              var bytesCount = 0;//定义一个变量记录字符串总字节长度
              var s = "";//定义一个空字符串用来接收重新拼接换行之后的字符串
              var pattern = new RegExp("[\u4E00-\u9FA5]+");//汉字的正则表达式
              for (var i = 0; i < str.length; i++) {//遍历原字符串
                  var c = str.charAt(i);//拿到每一个下标对应的值
                  // 统计字符串的字符长度
                  if (pattern.test(c)) {
                      bytesCount += 2;//如果是汉字长度+2
                  } else {
                      bytesCount += 1;//不是汉字长度+1
                  }
                  s += str.charAt(i);//重新拼接字符串
                  // 换行
                  if (bytesCount >= number) {//在指定的长度位置插入换行标签
                      s = s + '<br>';
                      // 重置
                      bytesCount = 0;//保证在下一个相同长度后继续换行
                  }
              }
                  return s;

这是我设想的实现模型，但没有成功。求指教。