如何解决DOM中innerText末尾空格被忽略的问题

标签的行为，即：</p><ul><li><strong>保留空白符：</strong> 连续的空白符（包括空格和制表符）不会被合并。</li><li><strong>保留换行符：</strong> 文本中的换行符会直接转换为实际的换行。</li><li><strong>不自动换行：</strong> 文本内容不会自动换行，除非遇到<br>标签或换行符。</li></ul><p>将white-space: pre应用于显示文本的DOM元素，可以确保任何通过innerText添加的空格，无论其位置如何，都将被精确地渲染出来。</p><h4>示例代码：应用css样式</h4><p>假设计算器显示屏的DOM元素ID为display，我们可以在CSS中这样设置：</p>                     <div class="aritcle_card">                         <a class="aritcle_card_img" href="/ai/1278">                             <img src="https://img.php.cn/upload/ai_manual/000/000/000/175680148611720.png" alt="万彩商图">                         </a>                         <div class="aritcle_card_info">                             <a href="/ai/1278">万彩商图</a>                             <p>专为电商打造的AI商拍工具，快速生成多样化的高质量商品图和模特图，助力商家节省成本，解决素材生产难、产图速度慢、场地设备拍摄等问题。</p>                             <div class="">                                 <img src="/static/images/card_xiazai.png" alt="万彩商图">                                 <span>212</span>                             </div>                         </div>                         <a href="/ai/1278" class="aritcle_card_btn">                             <span>查看详情</span>                             <img src="/static/images/cardxiayige-3.png" alt="万彩商图">                         </a>                     </div>                 <pre class="brush:php;toolbar:false;">#display {   white-space: pre;   /* 其他样式，如字体、颜色、边框等 */ }

function addToDisplay (String){   let display = document.querySelector("#display");   // 原始逻辑中可能包含复杂的空格处理   // 例如：if (currentNumber == undefined){ display.innerText = currentDisplay + "  " + string; }   // 或者尝试在字符串内添加额外空格 addToDisplay(" +_");   display.innerText += string; // 简化后的操作 }  const onClick = function() {   switch (this.id){     case "plus":       // clearCurrentNumber(); // 假设有此函数       addToDisplay(" + "); // 直接添加包含前后空格的字符串       break;     // ... 其他按钮逻辑   } };  document.getElementById('plus').onclick = onClick;