显示多个空格

src/views/badge/preview.vue

@@ -774,15 +774,19 @@ const validateInput = (input: string) => {
 
 const handleInput = (value: string) => {
   let byteLength = calculateByteLength(value);
-  // 如果超过最大字节数，禁止继续输入
   console.log('byteLength', byteLength, limitCount.value)
   if (byteLength > limitCount.value) {
-    // 超出字节数，直接截断到允许的最大字节数
     let validValue = '';
     let currentBytes = 0;
     for (let i = 0; i < value.length; i++) {
       const char = value.charAt(i);
-      const charBytes = char.charCodeAt(0) > 255 ? 2 : 1;
+      const code = char.charCodeAt(0);
+      let charBytes = 0;
+      if (code === 32) {
+        charBytes = 1;
+      } else {
+        charBytes = code > 255 ? 2 : 1;
+      }
       if (currentBytes + charBytes <= limitCount.value) {
         validValue += char;
         currentBytes += charBytes;
@@ -793,7 +797,6 @@ const handleInput = (value: string) => {
     shapeText.value = validValue;
     return;
   }
-  // 未超过最大字节数，正常更新
   shapeText.value = value;
 }
 
@@ -801,21 +804,15 @@ const calculateByteLength = (str: string) => {
   let len = 0;
   for (let i = 0; i < str.length; i++) {
     const code = str.charCodeAt(i);
-    // 中文字符和特殊符号占2字节，英文占1字节
+    if (code === 32) {
+      len += 1;
+    } else {
       len += code > 255 ? 2 : 1;
     }
+  }
   return len;
 }
 
-// const typeChange = (id: number) => {
-//   console.log('typeChange', id)
-//   typeId.value = id;
-//   shapeList.value = [];
-//   shapeImage.value = '';
-//   getStyle.value = '';
-//   getShapeList()
-// }
-
 const shapeChange = (item: any) => {
   console.log('shapeChange', item)
   sizeList.value.map((item: any) => {
@@ -1448,6 +1445,7 @@ onUnmounted(() => {
   font-family: chinese;
   overflow: hidden;
   text-shadow: 1px 0px 1px #000000a1;
+  white-space: pre-wrap;
 }
 .shape-item-image-round {
   border-radius: 50%;