テキストは改行を超えて中央に配置されますが、改行後の最初の行は短く、2 行目は長くなっています。

レンダリングは次のようになります。

 真ん中の大きなタイトルは、PC画面の方が広い場合は1行で表示される1行のテキストですが、モバイル側では改行されますが、下の行が上の行より長くなります。

私が最初に考えた方法は、改行文字を挿入して、テキストが幅を満たす前に強制的に折り返されるようにすることでした。その後、押し出された 2 行目の文字数を増やすことで、この効果を実現できます。具体的な実装手順は次のとおりです。

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;

これは私が思い描いた実装モデルですが、うまくいきませんでした。アドバイスをお願いします。