容器水平溢出时指定字符后换行、超长转指数及拖拽透明实现

Got it, let's tackle each of your requirements one by one and refactor your code to meet all the needs. Here's the complete solution with clear, human-friendly explanations:

1. Line Breaks After Specific Operators (Fix Horizontal Overflow) #

Instead of letting the browser break text randomly, we'll insert line breaks right after +, -, *, /, or = using a regular expression. This ensures the content wraps exactly where it makes sense for math expressions.

2. Vertical Scroll for Overflow #

We'll keep the overflow-y: auto property but set a fixed height for the containers, so the scrollbar triggers automatically when content exceeds the available space.

3. Convert Long Numbers to Exponential Notation #

We'll add a helper function that detects numbers longer than a set maximum length, converts them to exponential notation, and preserves the rest of the expression (including comma-separated decimals like 2,3).

4. Draggable Container #

Implement basic drag functionality using mouse events to let users move the entire table container around the page smoothly.

5. Transparency Effect #

Add CSS opacity with a smooth transition for a polished, semi-transparent look (with full opacity on hover for better readability).

Full Code Implementation #

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Math Table Tool</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <input type="button" value="MakeTable" onClick="makeArr()">
  <div class="tables" id="tables">
    <div id="myTable1"></div>
    <div id="myTable2Container">
      <table id="myTable2">
        <thead>
          <tr><th>Always here, same size</th></tr>
        </thead>
        <tbody>
          <tr><td>these</td></tr>
          <tr><td>are</td></tr>
          <tr><td>just</td></tr>
          <tr><td>contents</td></tr>
        </tbody>
      </table>
    </div>
  </div>
  <script src="script.js"></script>
</body>
</html>

CSS (styles.css)

.tables {
  display: flex;
  position: absolute; /* Required for dragging functionality */
  cursor: grab;
  opacity: 0.9; /* Default semi-transparency */
  transition: opacity 0.3s ease; /* Smooth hover transition */
  gap: 10px;
}

.tables:hover {
  opacity: 1; /* Full opacity on hover for better readability */
}

#myTable1, #myTable2Container {
  background: #EEEEEB;
  border: none;
  overflow-y: auto;
  width: 275px;
  height: 200px; /* Fixed height to trigger vertical scroll */
}

#myTable1 td, #myTable2 td {
  text-align: right;
  padding: 8px;
  word-break: break-word;
}

#myTable2 {
  width: 100%;
  border-collapse: collapse;
}

#myTable2 th {
  padding: 8px;
  text-align: center;
  background: #ddd;
}

JavaScript (script.js)

const array = [
  "9999999999999999+9999999999999999=2,3+16",
  "666666666666666666666+3=666666666666666666669",
  "3x3=9",
  "2,3-2,1=0,2"
];

const table = document.createElement('TABLE');
const tableBody = document.createElement('TBODY');
table.border = '0';
table.appendChild(tableBody);

// Convert long numbers to exponential notation (adjust maxLength as needed)
function convertToExponential(str, maxLength = 15) {
  return str.replace(/(\d[\d,]+)/g, (match) => {
    const numStr = match.replace(/,/g, '.');
    const num = parseFloat(numStr);
    if (!isNaN(num) && numStr.length > maxLength) {
      return num.toExponential(2); // Keep 2 decimal places for readability
    }
    return match;
  });
}

// Add line breaks after math operators to fix horizontal overflow
function addOperatorLineBreaks(str) {
  return str.replace(/([+\-x/=])/g, '$1<br>');
}

function makeArr() {
  const myTableDiv = document.getElementById("myTable1");
  tableBody.innerHTML = "";

  for (let i = 0; i < array.length; i++) {
    let expr = array[i];
    // First convert long numbers, then add line breaks
    expr = convertToExponential(expr);
    expr = addOperatorLineBreaks(expr);

    const tr = document.createElement('TR');
    const td = document.createElement('TD');
    td.width = '275';
    td.innerHTML = expr; // Use innerHTML to render line breaks
    tr.appendChild(td);
    tableBody.appendChild(tr);
  }

  myTableDiv.innerHTML = "";
  myTableDiv.appendChild(table);

  // Match myTable1 size to myTable2Container
  const z = document.getElementById("myTable1");
  const tableContainer = document.getElementById("myTable2Container");
  const tablewidth = getComputedStyle(tableContainer).getPropertyValue('width');
  const tableheight = getComputedStyle(tableContainer).getPropertyValue('height');
  z.style.width = tablewidth;
  z.style.height = tableheight;
}

// Drag functionality for the entire tables container
const tablesContainer = document.getElementById('tables');
let isDragging = false;
let startX, startY, initialX, initialY;

tablesContainer.addEventListener('mousedown', (e) => {
  isDragging = true;
  startX = e.clientX;
  startY = e.clientY;
  initialX = tablesContainer.offsetLeft;
  initialY = tablesContainer.offsetTop;
  tablesContainer.style.cursor = 'grabbing';
});

document.addEventListener('mousemove', (e) => {
  if (!isDragging) return;
  const dx = e.clientX - startX;
  const dy = e.clientY - startY;
  tablesContainer.style.left = `${initialX + dx}px`;
  tablesContainer.style.top = `${initialY + dy}px`;
});

document.addEventListener('mouseup', () => {
  isDragging = false;
  tablesContainer.style.cursor = 'grab';
});

Quick Tips for Customization: #

• Adjust the maxLength parameter in convertToExponential() to change when numbers switch to exponential notation.
• Modify the height value in CSS to make the containers taller/shorter.
• Tweak the opacity values to adjust how transparent the container is.

内容的提问来源于stack exchange，提问作者Sara