Dav*_*651 3 html css html-table text-align line
我想像这里一样对齐此文本，但如果我运行此代码，我的较长文本在一行中，文本“我的信息在两行中。如何与宽度有限的更多行对齐？
<html>
<head>
<style>
.div_name p{
position: fixed;
display:inline;
}
.div_city p{
display:inline;
}
.div_info p{
display:inline;
}
div.all_info {
position: absolute;
right: 30%;
width: 200px;
height: 100px;
//border: 3px solid blue;
}
</style>
</head>
<body>
<div class="all_info" align = "right">
<table>
<tr><td align="right" width150px><div class="div_name:">Your name: </td> <td align="left" width=200px><p id="myname">David</p></td></div></tr>
<tr><td align="right" width=150px><div class="div_city:">Your city: </td> <td align="left" width=200px><p id="mycity">Prageu</p></td></div></tr>
<tr><td align="right" width=250px><div class="div_info:">Your Informations: </td> <td align="left" width=200px><p id="myinfo">myinfomyinfomyinfomyinfomyinfomyinfomyinfomyinfomyinfomyinfomyinfomyinfomyinfomyinfo</p></td></div></tr>
</table>
</div>
</body>
</html>
word-break:break-all秘密是在每个细胞上使用<td>。
或者，您可以使用overflow-wrap但行为类似。
注意：与 word-break 相比，overflow-wrap 仅在整个单词无法在不溢出的情况下放置在自己的行上时才会创建中断。
这是一篇对它们进行比较的详尽文章
table{
width: 400px;
border: 1px dashed salmon;
}
table td{
vertical-align: top;
padding: 5px;
word-break: break-all; /* MUST ADD THIS */
}
table td:nth-child(1){
text-align: right;
width: 140px;
}<table>
<tr>
<td>Your name:
<td>David
</tr>
<tr>
<td>Your city:
<td>Prageu
</tr>
<tr>
<td>Your Informations:
<td>myinfomyinfomyinfomyinfomyinfomyinfomyinfomyinfomyinfomyinfomyinfomyinfomyinfomyinfo
</tr>
</table>我已经清理了您的 HTML 标记，无需在表格单元格内进行换行div和标记。p