HTML / CSS：文本内容溢出时如何制作段落？更多问题

问题描述

var array = [1,2,3,4,"666666666666666666666+3=123456678"];
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.height = tableheight;
    z.style.width = tablewidth;
}

#myTable1,#myTable2{
    background: #EEEEEB;
    width: 100;
    border: none;
    float: left;
    position: relative;
}

#myTable1 td,#myTable2 td{
    text-align: right;
    overflow: auto;
}

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

    </div>
    
    <table id="myTable2">
    <th>Always here,same size</th>
        <tr>
        <td>1</td>
        </tr>
        <tr>
        <td>2</td>
        </tr>
        <tr>
        <td>3</td>
        </tr>
        <tr>
        <td>4</td>
        </tr>

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

大家好！我希望有人可以帮助我解决几个问题：）

主要目的是使 myTable1 的大小与 myTable2 相同（应该总是相同的尺寸）。如果 myTable1 的宽度溢出，我希望它使用内容创建一个新段落，如果高度溢出，则使其可滚动。这甚至可以与CSS溢出一起使用（我没有找到任何内容可将内容放在新的段落中）？

为什么将666 ... 6显示为666 ... 0以及如何防止显示？
如何防止 myTable2 的大小以及 myTable1 的大小发生变化在增加 myTable2 的 th 中的内容量时出错了吗？
怎么了，为什么我甚至不能使它滚动？
例如，如何在不使用float的情况下将两个表格式化为左侧：因此它离开了身体？

很抱歉有很多问题和困惑...我也非常欢迎其他有用的建议和帮助=）

解决方法

几件事：

从float: left中删除#myTable1,#myTable2并将display: flex添加到.tables
将word-break: break-all添加到#myTable1 td,#myTable2 td
将overflow: auto添加到#myTable1,#myTable2
您无法使用table或tr使td，overflow: auto，scroll 可滚动，您必须在div，span
由于您达到最大值 https://www.w3schools.com/jsref/jsref_max_value.asp#:~:text=The%20MAX_VALUE%20property%20returns%20the,MAX_VALUE%20are%20represented%20as%20infinity，您在66666666666666666之后获得了0。

var array = [1,2,3,4,"666666666666666666666+3=123456678"];
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>1</td>
          </tr>
          <tr>
          <td>2</td>
          </tr>
          <tr>
          <td>3</td>
          </tr>
          <tr>
          <td>4</td>
          </tr>

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

html javascript overflow position

HTML / CSS：文本内容溢出时如何制作段落？更多问题

问题描述

解决方法

相关问答