white-space: Vor-Linie für kleine Zelle

Question

Ich habe diese Zeilen von Daten, die jeweils als rTableCell definiert sind und hat eine feste width: 150px;. Ohne einen white-space zu verwenden, wird ein Text, der länger ist als dieser width, ausgeblendet. Ich möchte, dass sie in die nächste Zeile gehen und auch vertikal zentriert sind. Ich habe versucht, mit white-space:pre-line, aber mit der maximalen height: 39px der Text wird nicht in die nächste Zeile gehen. Gibt es eine Lösung, um die Texte in height:39px zu schrumpfen und alles in der bestehenden Zelle in 2 Zeilen schreiben zu lassen?

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

Wunschverhalten:

Working jsFiddle

Answer 1

Sie können die Tabellenzelle und table-row Anzeigeoptionen verwenden zu formatieren, wie Sie möchten:

.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

Ändern der CSS hier

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