white-space：小单元的预行答案

【问题标题】：white-space: pre-line for small cellwhite-space：小单元的预行
【发布时间】：2016-04-06 14:38:57
【问题描述】：

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

.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

【问题讨论】：

喜欢这个jsfiddle.net/b5vhjs8w?
@j08691 完全正确！谢谢

标签： html css whitespace

【解决方案1】：

您可以使用表格单元格和表格行显示选项来设置您喜欢的格式：

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

【讨论】：

【解决方案2】：

在此处更改 css

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

【讨论】：