javascript - 无法对齐 CSS 中的文本

Question

在“关于”的输出中，我希望新行位于“Lorem”下方，但新行（来自“incididunt”）移动到冒号（:) 下方。About 的内容是动态的，恢复的文本可以/不能这么长，所以我不能使用 text-align，因为它也会移动冒号（:)。

我怎样才能根据需要对齐它？

<table>
  <tr>
   <td>
     <div>Docteur</div>
   </td>
   <td>
    <div>:&nbsp;&nbsp; Name of Doctor</div>
   </td>
  </tr> 
  <tr>
   <td>
     <div>About</div>
   </td>
   <td>
    <div>:&nbsp;&nbsp; Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad min </div>
   </td>
  </tr> 
    <tr>
   <td>
     <div>Location</div>
   </td>
   <td>
    <div>:&nbsp;&nbsp; Some Location</div>
   </td>
  </tr> 
</table>

标签： javascripthtmlcss

Answer 1

您可以像这样为冒号添加一列，并td使用 css 属性将元素对齐，vertical-align使其始终位于顶部而不是中间。

td {
  vertical-align: top;
}

<table>
  <tr>
    <td>
      <div>Docteur</div>
    </td>
    <td>
      :
    </td>
    <td>
      <div>Name of Doctor</div>
    </td>
  </tr>
  <tr>
    <td>
      <div>About</div>
    </td>
    <td>
      :
    </td>
    <td>
      <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad min </div>
    </td>
  </tr>
  <tr>
    <td>
      <div>Location</div>
    </td>
    <td>
      :
    </td>
    <td>
      <div>Some Location</div>
    </td>
  </tr>
</table>