white-space: small cell预线

Question

我有这几行数据，每行都定义为rTableCell并且有一个固定的width: 150px;。在不使用任何 white-space 的情况下，当文本长度超过此 width 时，它将被隐藏。我希望它们继续在下一行并且也垂直居中。我尝试使用 white-space:pre-line 但最大 height: 39px 文本不会转到下一行。是否有任何解决方案可以缩小 height:39px 中的文本并将其全部写入现有单元格中的 2 行？

.rTableCell {
  float: left;
  height: 36px;
  overflow: hidden;
  padding: 3px 1%;
  width: 150px;
  vertical-align: middle;
  line-height: 36px;
}
.rTableCellId {
  width: 30px;
}
.ndLabel {
  color: #999;
  font-size: 17px;
  font-family: 'PT Sans', sans-serif;
}

<div class="rTableRow" style="color:#797979">
  <div class="rTableCell rTableCellId ndLabel">793</div>
  <div class="rTableCell ndLabel">Visits on website or Facebook or Google</div>
  <div class="rTableCell ndLabel">[Web Property]</div>
</div>
<br/>
<br/>
<br/>
<div class="rTableRow" style="color:#797979">
  <div class="rTableCell rTableCellId ndLabel">835</div>
  <div class="rTableCell ndLabel">Visits on website</div>
  <div class="rTableCell ndLabel">LP thank you</div>
</div>

期望的行为：

Working jsFiddle

Answer 1

在这里更改css

.rTableCell {
     float: left;
     height: 36px;
     overflow: hidden;
     padding: 3px 1%;
     width: 150px;
     vertical-align: middle;
     /*line-height: 36px;*/
     white-space: break-word
}

Answer 2

您可以使用 table-cell 和 table-row 显示选项来设置您喜欢的格式：

.rTableRow {
  display:table-row;
}
.rTableCell {
  height: 36px;
  overflow: hidden;
  padding: 3px 3%;
  width: 150px;
  vertical-align: middle;
  display:table-cell;
}

.rTableCellId {
  width: 50px;
}

.ndLabel {
  color: #999;
  font-size: 17px;
  font-family: 'PT Sans', sans-serif;
}

<div class="rTableRow" style="color:#797979">
  <div class="rTableCell rTableCellId ndLabel">793</div>
  <div class="rTableCell ndLabel">Visits on website or Facebook or Google</div>
  <div class="rTableCell ndLabel">[Web Property]</div>
</div>
<br/><br/><br/>
<div class="rTableRow" style="color:#797979">
  <div class="rTableCell rTableCellId ndLabel">835</div>
  <div class="rTableCell ndLabel">Visits on website</div>
  <div class="rTableCell ndLabel">LP thank you</div>
</div>

white-space: small cell预线

white-space: pre-line for small cell

html

css

whitespace