dos

Public/static/css/index.css

@@ -552,4 +552,5 @@ input[name=signature]::-webkit-input-placeholder {
   flex: 1;
   background: url(../image2/flag-redline.png) left bottom no-repeat;
   background-size: 100% auto;
+  white-space: nowrap;
 }
\ No newline at end of file

Public/static/js/common.js

@@ -344,12 +344,27 @@ function showPage1() {
 
 }
 
+function calculationWrap() {
+    let redLineWidth = pxToRem(367 * 2);
+    let content = '啊啊啊啊啊啊啊啊';
+    for (let i = 8; i < 20; i++) {
+        let textWidth = posterCtx.measureText(content).width;
+        if (textWidth > redLineWidth) {
+            return i;
+        }
+    }
+}
+
 function createPoster() {
+    let canvasinfo = initCanvas('.poster-canvas-block', 'posterCanvas', 640 * 2, 1238 * 2, true);
+    posterCanvas = canvasinfo[0];
+    posterCtx = canvasinfo[1];
+    let wrapNum = calculationWrap();
     $('.poster-list-page').show();
     $('.poster-page .poster-canvas-block').append($('<img class="posterImg" src="" />'));
     // 创建海报页面的flag列表
     for (let i = 0; i < flagStack.length; i++) {
-        createList('.poster-list-page .poster-list', flagStack[i], i + 1);
+        createList('.poster-list-page .poster-list', flagStack[i], i + 1, wrapNum);
     }
 
     let flagListHeight = $('.poster-list-page .poster-list').height();
@@ -368,7 +383,7 @@ function createPoster() {
     }
 
 
-
+    $('#posterCanvas').remove();
     let canvasinfo = initCanvas('.poster-canvas-block', 'posterCanvas', 640 * 2, posterCanvasHeight * 2, true);
     posterCanvas = canvasinfo[0];
     posterCtx = canvasinfo[1];
@@ -687,11 +702,18 @@ function showPersonalPage() {
     }
 }
 
-function createList(target, flag, no) {
+function createList(target, flag, no, wrapNum = 0) {
     let item = $('<div class="flag-item"></div>');
     item.append($('<div class="flag-no"></div>'));
     item.append($('<div class="flag-text"></div>'));
     item.find('.flag-no').text(no);
+    if (wrapNum != 0) {
+        let res = '';
+        for (let i = 0; i < flag.length; i += wrapNum) {
+            res += flag.slice(i, wrapNum) + '<br />';
+        }
+        flag = res;
+    }
     item.find('.flag-text').text(flag);
     $(target).append(item);
 }