当超过一定长度时，如何总是在几个字符之一之后进行换行？答案

【问题标题】：How to do a linebreak always after one of a couple chars when a certain length would be exceeded?当超过一定长度时，如何总是在几个字符之一之后进行换行？
【发布时间】：2020-08-19 13:05:32
【问题描述】：

var array = ["9999999999999999+9999999999999999=2,3+16","666666666666666666666+3=666666666666666666669","3x3=9","2,3-2,1=0,2"];
var table = document.createElement('TABLE');
    var tableBody = document.createElement('TBODY');
        table.border = '0';
        table.appendChild(tableBody);
        
function makeArr()
{
        var myTableDiv = document.getElementById("myTable1");
        tableBody.innerHTML = "";
            
        for(var i=0;i<array.length;i++)
        {
            
        var tr = document.createElement('TR');
            tableBody.appendChild(tr);
            
        var td = document.createElement('TD')
            td.width = '275';
            
            td.appendChild(document.createTextNode(array[i]));

            tr.appendChild(td);
            myTableDiv.appendChild(table);
        }
        
    var z = document.getElementById("myTable1");
    var tablewidth = getComputedStyle(document.getElementById("myTable2")).getPropertyValue('width');
    var tableheight = getComputedStyle(document.getElementById("myTable2")).getPropertyValue('height');
    z.style.width = tablewidth;
    z.style.height = tableheight;
}

.tables {
  display: flex;
}

#myTable1,
#myTable2{
    background: #EEEEEB;
    border: none;
    position: relative;
    overflow-y: auto
}

#myTable1 td,
#myTable2 td{
    text-align: right;
    word-break: break-all;
}

<head>
<meta charset="UTF-8">
</head>
<body>
<input type="button"value="MakeTable"onClick="makeArr()">
<div class="tables" id="tables" >
    <div id="myTable1">

    </div>
    
    <div id="myTable2">
      <table id="myTable2">
      <th>Always here,same size</th>
          <tr>
          <td>these</td>
          </tr>
          <tr>
          <td>are</td>
          </tr>
          <tr>
          <td>just</td>
          </tr>
          <tr>
          <td>contents</td>
          </tr>

      </table>
   </div>
</div>
</body>

类似于 css 标签“溢出”的功能，如果容器水平溢出，我希望有换行符，并且总是以 5 个特定字符（+、-、*、/、=）之一结束行。垂直溢出将通过滚动解决（溢出标签应该提供）

这就是我想要的样子：

还有当超过最大允许长度时如何转换成指数表示法？

最大允许长度在 JS 中定义。

Sidenode：稍后的目标是能够通过拖放来拖动整个东西并使其透明以获得一些不错的效果。

【问题讨论】：

使用.toExponential() 将数字转换为其指数形式。至于在超过一定长度时添加换行符，这是一个非常模糊的说法。请准确描述您希望这种情况发生的条件。
谢谢！有点像 CSS 标记“溢出”，但它不提供该功能......而不是溢出容器（-padding？）它必须进行换行并始终以 (+,-,*,/,=) 结尾。输入数字的最大字符长度将被声明为 elsewere，如果它为 long，则转换为指数
为什么你的数学表达式中有逗号？
我从 windows Calculator 复制了它，我认为是因为它在德语中我们将 2 点 5 写为 2,5 而不是 2.5
次要注意：id="myTable2 有两个元素。 ID 必须是唯一的。

标签： javascript html css line-breaks paragraph

【解决方案1】：

一个完整的解决方案相当复杂，所以我不会为你写下所有的东西，我会给你一个清单来进一步调查：

将粗体答案单独放在一行上：由于每个答案（即每个等式的右侧）都应始终单独一行，因此请使用.split(/=/) 将等式分成两半。您可以将右半部分放入 <div> 中，然后使用 CSS 将该 div 格式化为粗体。

看起来您已经知道如何获取元素的计算宽度了。您可以使用它来确定答案是否太宽，在这种情况下，您可以使用.toExponential() 将其格式化为指数形式，然后再将其插入<div>。

至于等式的左侧，如果您想确定哪些数字太长而无法放入一行并使用toExponential() 重新格式化，这会变得很棘手，因为您现在必须解析每个数字，请测试它的长度，并决定是否重新格式化它。不是不可能，而是痛苦。

假设您不想为此烦恼，并在必要时继续执行使等式左侧换行的任务，但仅在 +,-,*,/ 之一之后（它不包括 =，因为前一个拆分字符串的步骤将为您提供等式的左侧，直到但不包括=）：将[space][operator][space]（例如 + ）的所有实例替换为&nbsp;[operator]&nbsp;[Unicode zero width space]。这将确保当换行时，它仅在零宽度空间处这样做，但空格（实际上是不间断的空格）仍然出现在运算符周围。 See this answer for details.

【讨论】：

非常感谢您的指导 =))) 我知道我能做什么了！