空白：小セル用のプレライン

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

あなたが好きなようにフォーマットするために、テーブルセルとテーブル行の表示オプションを使用することができます。このhttps://jsfiddle.net/b5vhjs8w/よう

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

Answer 2

変更CSS

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