白色空间：小细胞的预备线

Question

我有这些数据行，每行都定义为rTableCell并且具有固定的width: 150px;。如果不使用任何white-space，则当文字长于此width时，它将被隐藏。我希望他们继续下一行并垂直居中。我尝试使用white-space:pre-line但是文本的最大height: 39px不会转到下一行。是否有任何解决方案可以缩小height:39px中的文本并将所有文本都放在现有单元格的2行中？

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

所需行为

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

您可以根据需要使用表格单元格和表格行显示选项进行格式化：

.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>