打破表格单元格内没有空格的长文本答案

【问题标题】：Break long text without spaces inside table cell打破表格单元格内没有空格的长文本
【发布时间】：2020-08-02 16:34:56
【问题描述】：

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

【问题讨论】：

您希望将其格式化为表格视图，还是您对多行段落的问题？ (myinfomyinfomyinfo) 如果是关于后者，你的问题是关于“myinfomyinfomyinfo”是一个没有空格的大词吗？

标签： html css html-table line text-align

【解决方案1】：

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

您也可以使用overflow-wrap，但行为相似。

注意：与分词相反，溢出换行只会在整个单词不能放在自己的行上而不溢出的情况下才会创建分行。

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 标记，无需在表格单元格内包装 div 和 p 标记。

【讨论】：

【解决方案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;
}

【讨论】：