文本对齐：证明不在表 td 中工作答案

【问题标题】：Text-align: justify not working in table td文本对齐：证明不在表 td 中工作
【发布时间】：2015-09-22 00:29:32
【问题描述】：

我想要一些文字是合理的。

我尝试将 text-align: justify 放在 td 中，但它不起作用。它总是显示为 text-align: left

HTML：

<div class="pha-wrapperTAB">
  <table class="pha-contentTAB">
    <tbody>
      <tr>
        <td>농     정     과</td>
        <td>063-454-2830</td>
      </tr>
      <tr>
        <td>농 촌 지   원 과</td>
        <td>063-454-5225</td>
      </tr>
      <tr>
        <td>기  술 보  급 과</td>
        <td>063-454-5302</td>
      </tr>
      <tr>
        <td>농산 물 유  통과</td>
        <td>063-454-3013</td>
      </tr>
      <tr>
        <td>농기계임대사업소</td>
        <td>063-454-5248</td>
      </tr>
      <tr>
        <td>농산 물가 공센터</td>
        <td>063-454-5257</td>
      </tr>
    </tbody>
  </table>
</div>

CSS：

.pha-contentTAB tr td {
  white-space: nowrap;
}
.pha-contentTAB tr td:nth-child(1) {

}
.pha-contentTAB{
  width:100%;
}
.pha-contentTAB tr td:first-child{
  width:55%;
  text-align: justify;
}
.pha-contentTAB tr td:last-child{
  font-weight:bold;
  font-size:15px;
  line-height:15px;
}
.pha-wrapperTAB{
  display:inline-block;
  width: 100%;
  padding: 0 5px 0 5px;
}
.pha-contentTAB td{
  border-bottom: 0px dotted #E4E4E4;
  line-height:20px;
  float:left;
  width:45%;
  font-size:14px;
  padding:2px 0;
  vertical-align: middle;
}

我尝试为它添加许多样式，但都失败了，例如：

.fulljustify {
   text-align:justify;
 }
.fulljustify:after {
   content: "";
   display: inline-block;
   width: 100%;    
}

我不明白为什么 text-align justify 不起作用。

【问题讨论】：

标签： html css text-align

【解决方案1】：

您可以将理由添加到您设置表格单元格样式的同一位置：

.pha-contentTAB td {
    text-align:justify;
}

虽然 justify 不会对单行代码产生任何影响。只有当它换行到下一行时，它才会证明除最后一行之外的所有行。

在您的示例中，您的 CSS 将起作用，您只需将该类应用于每个表格单元格：

<td class="fulljustify">...</td>

【讨论】：

【解决方案2】：

如果你想让td:first-child 的文字占据整行，试试这个：
你也应该删除你在.pha-contentTAB tr td上的white-space:nowrap

.pha-contentTAB tr td {
/*   white-space: nowrap; */
}
.pha-contentTAB tr td:nth-child(1) {

}
.pha-contentTAB{
/*   width:100%; */
}
.pha-contentTAB tr > td:first-child{
/*   width:55%; */
  background-color: #CC0;
  text-align: justify;
}
.pha-contentTAB tr td:last-child{
  font-weight:bold;
  font-size:15px;
  line-height:15px;
}
.pha-wrapperTAB{
  display:inline-block;
/*   width: 100%; */
  padding: 0 5px 0 5px;
}
.pha-contentTAB td{
  border-bottom: 0px dotted #E4E4E4;
  line-height:20px;
/*   float:left; */
/*   width:45%; */
  font-size:14px;
  padding:2px 0;
  vertical-align: middle;

}

td:first-child::after {
  content: "";
  display: inline-block;
  width: 100%;
  background-color: #CC0;
}

<div class="pha-wrapperTAB">
  <table class="pha-contentTAB">
    <tbody>
      <tr>
        <td>농     정     과</td>
        <td>063-454-2830</td>
      </tr>
      <tr>
        <td>농 촌 지   원 과</td>
        <td>063-454-5225</td>
      </tr>
      <tr>
        <td>기  술 보  급 과</td>
        <td>063-454-5302</td>
      </tr>
      <tr>
        <td>농산 물 유  통과</td>
        <td>063-454-3013</td>
      </tr>
      <tr>
        <td>농기계임대사업소</td>
        <td>063-454-5248</td>
      </tr>
      <tr>
        <td>농산 물가 공센터</td>
        <td>063-454-5257</td>
      </tr>
    </tbody>
  </table>
</div>

你可以在这里阅读更多关于它的信息how-to-make-text-take-full-width-of-its-container

【讨论】：