根据你提供的代码,当文本输入过长时并没有进行自动换行
时间: 2024-04-17 12:26:18 浏览: 89
非常抱歉,我之前的回答中犯了一个错误。为了在非输入框元素中实现文本的自动换行,我们需要使用`white-space`属性。请尝试以下修改后的代码:
```html
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: separate;
width: 100%;
}
td, th {
border: 1.5px solid black;
padding: 5px;
white-space: pre-wrap; /* 允许保留空格和自动换行 */
}
td:nth-child(1) input,
td:nth-child(2) input,
td:nth-child(3) input,
td:nth-child(4) input,
td:nth-child(5) input,
td:nth-child(6) input,
td:nth-child(7) input {
width: 10%;
}
</style>
</head>
<body>
<table>
<tr>
<td><input type="text" oninput="filterTable(0)" placeholder="工艺膜层"></td>
<td><input type="text" oninput="filterTable(1)" placeholder="AOI Step"></td>
<td><input type="text" oninput="filterTable(2)" placeholder="不良类型"></td>
<td><input type="text" oninput="filterTable(3)" placeholder="Layer(Code)"></td>
<td><input type="text" oninput="filterTable(4)" placeholder="Type"></td>
<td><input type="text" oninput="filterTable(5)" placeholder="Dpet"></td>
<td><input type="text" oninput="filterTable(6)" placeholder="Subcode"></td>
<td contenteditable="true">Code描述</td>
<td contenteditable="true">Image1</td>
<td contenteditable="true">Image2</td>
<td contenteditable="true">Image3</td>
<td contenteditable="true">Image4</td>
<td contenteditable="true">Image5</td>
<td contenteditable="true">Image6</td>
<td contenteditable="true">判定细则</td>
</tr>
</table>
</body>
</html>
```
在上述代码中,我将`white-space`属性设置为`pre-wrap`,这将保留空格和允许自动换行。这样,当文本过长时,表格中的文本将自动换行显示。
请尝试使用修改后的代码,并检查文本输入过长时是否会自动换行显示。如果还有其他问题,请随时提供更多详细信息。非常抱歉给您带来的困扰。
阅读全文