如果超出一定长度，如何总是在几个字符之一之后总是进行换行？

问题描述

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标记“ overflow”的功能，如果容器水平溢出，我想换行，并且总是在5个特定字符（+，-，*，/，=）之一上结束行。垂直溢出将通过滚动来解决（溢出标记应提供该值）

这就是我想要的样子：

当超过最大允许长度时，又如何转换为指数符号？

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

Sidenode：同样，后来的目标是能够通过拖放来拖动整个对象并使它透明以产生一些不错的效果。

解决方法

一个完整的解决方案确实涉及其中，因此，与其为您编写全部解决方案，不如给我列出一些要进一步研究的内容：

将答案单独以粗体显示在一行上：由于每个答案（即每个方程式的右侧）应始终位于一条直线上，因此请使用.split(/=/)将方程式分为两半。您可以将右半部分放到<div>中，然后使用CSS将div的格式设置为粗体。

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

对于等式的左侧，如果您要确定哪些数字太长而无法容纳在一行中，并用toExponential()重新格式化，那么这将变得很棘手，因为您现在必须解析每个数字，测试其长度，然后决定是否重新格式化。不是不可能，而是痛苦。

假定您不想为此而烦恼，并继续进行必要时使方程式左侧换行但仅在+,-,*,/中的一个之后（不包括{{1} }，因为拆分字符串的上一步将使您仅处于等式的左侧，直到但不包括=）：将=的所有实例（例如[space][operator][space]）替换为 + 。这样可以确保当换行时，换行仅在零宽度的空格处进行，而空格（实际上是不间断的空格）仍会出现在运算符周围。 See this answer for details。

html javascript line-breaks paragraph

如果超出一定长度，如何总是在几个字符之一之后总是进行换行？

问题描述

解决方法

相关问答