gpt4 book ai didi

html - 打破表格单元格内没有空格的长文本

转载 作者:行者123 更新时间:2023-12-05 01:12:55 24 4
gpt4 key购买 nike

我想将此文本对齐为 here但是如果我运行这段代码,我的较长文本在一行中,文本“我的信息在两行中。如何对齐到宽度有限的更多行?

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

最佳答案

secret 是使用 word-break:break-all 在每个 <td>单元格。

或者您可以使用 overflow-wrap 但行为相似。

Note: In contrast to word-break, overflow-wrap will only create a break if an entire word cannot be placed on its own line without overflowing.

Here's a thorough article比较他们两个

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 标记,不需要包装 divp表格单元格内的标签。

关于html - 打破表格单元格内没有空格的长文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61317978/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com