Question

在我的代码中，我很难在最后两个div中换行文本（费率更改日期和费率调整频率）

<table>
<tr>
<td> <div> Rate </div> </td>
<td> <div> Rate change date </div> </td>
<td> <div> Rate Adjustment Frequency</div> </td>
</tr>
<tr>
<td> <input type="text"> </td>
<td> <input type="text"></td>
<td> <input type="text"> </td>
</tr>
</table>

“速率调整频率”应显示在屏幕上，如第一行的“速率调整”和在第二行的“频率”（中间），而在速率“更改日期”的情况下，它应该像第一行上的“速率”一样包裹＆amp;第二行“更改日期”（中间）

检查图像是否有疑问：my goal

Answer 1

这里是：

<table>
<tr>
<td align="center" valign="middle"> <div> Rate </div> </td>
<td align="center" valign="middle"> <div> Rate change<br /> date </div> </td>
<td align="center" valign="middle"> <div> Rate Adjustment<br /> Frequency</div> </td>
</tr>
<tr>
<td> <input type="text"> </td>
<td> <input type="text"></td>
<td> <input type="text"> </td>
</tr>
</table>

Answer 2

<table>
<tr>
<td> <div> Rate </div> </td>
<td> <div style="text-align: center;"> Rate <br /> change date </div> </td>
<td> <div style="text-align: center;"> Rate Adjustment <br /> Frequency</div> </td>
</tr>
<tr>
<td> <input type="text"> </td>
<td> <input type="text"></td>
<td> <input type="text"> </td>
</tr>
</table>

没有

Answer 3

问题在于您无法指定文本将在哪个点进行换行。换行位置取决于字体和文本大小。如果您正在寻找“速率调整频率”中的“调整”作为包含在下面的单词，那么您应该将文本包装在元素中，并将跨度样式设置为具有比div小的宽度。逐渐减小跨度的大小将最终迫使“调整”落入下一行。

Answer 4

也许不是最好的解决方案

<table>
<tr>
<td rowspan="2"> <div> Rate </div> </td>
<td> <div> Rate  </div> </td>
<td> <div> Rate Adjustment </div> </td>
</tr>
<tr>
<td> <div> change date </div> </td>
<td> <div> Frequency</div> </td>
</tr>
<tr>
<td> <input type="text"> </td>
<td> <input type="text"></td>
<td> <input type="text"> </td>
</tr>
</table>

但是works

HTML Div将文本移动到下一行

4 个答案: