HTML DIV移动文本到下一行

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> 

“价格调整频率”应显示在第一行&“频率”（中）在第二行上的“速率调整”屏幕，而在速率“更改日期”的情况下，它应该像第一行上的“速率”&“更改日期” line

查询图片（如有疑问）：my goal

Answer 1

<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 2

问题是你不能指定文本将在哪一点包装。换行位置取决于字体和文本大小。如果您正在寻找“Rate Adjustment Frequency”中的“Adjustment”作为包裹在下面的单词，那么您应该将文本包裹在一个元素中，并将该跨度设置为具有比div更小的宽度。逐渐减小跨度的大小最终会迫使“调整”落入下一行。

Answer 3

那就是：

<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 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