打破表格单元格内不带空格的长文本

我想像这里一样对齐此文本，但如果我运行此代码，我的较长文本在一行中，文本“我的信息在两行中。如何与宽度有限的更多行对齐？

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

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

呼唤远方

浏览 103回答 2

2回答

叮当猫咪

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

浮云间

<head><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"><script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script> </head><body>  <div class="row">   <div class="col-6">      Space for other element or leave it blank  </div>    <div class="col-3 text-right pr-0">        <p>Your Name:</p>        <p>Your City:</p>        <p>Your Informations:</p>    </div>      <div class="col-2 text-left pl-2">        <p>XYZ</p>        <p>XYZ City</p>        <p>myinfomyinfomyinfomyinfomyinfomyinfomyinfomyinfomyinfomyinfomyinfomyinfomyinfomyinfo</p>      </div> </div>p{  overflow-wrap: break-word;  margin: 0 !important;}

随时随地看视频慕课网APP