html - 在 Bootstrap 中以垂直对齐顶部显示文本并带有标签

Question

在 bootstrap 表格单元格中以垂直对齐方式显示文本，标签文本应换行显示

<td>
  <span>16/12/2018 00:00:00</span>
  <p class="label label-danger" style="width:100px;line-height:normal;word-wrap:break-word;white-space: normal;">Some long text here like abcd smnopqurst xyz</p>
</td>

Answer 1

label label-danger 在 bootstrap 4 中不可用，请使用 badge badge-danger

td默认vertical-align是一个baseline，所以设置vertical-align top

为 P 添加类 badge badge-danger mb-0

<td>
  <span>16/12/2018 00:00:00</span>
  <p class="badge badge-danger mb-0" style="width:100px;line-height:normal;word-wrap:break-word;white-space: normal;">Some long text here like abcd smnopqurst xyz</p>
</td>

https://jsfiddle.net/lalji1051/7j89ze6f/8/

CSS

td{
  vertical-align:top;
}
td p.badge{
  vertical-align:top;
  display:inline-block;
}