在 table 单元格内断开没有空格的长文本

Question

我想像 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>

Answer 1

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

或者您可以使用 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 标记，不需要在你的 table 单元格中包装 div 和 p 标签。

Answer 2

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

在 table 单元格内断开没有空格的长文本

Break long text without spaces inside table cell

html

css

html-table

text-align

line