white-space: pre-line для маленькой ячейки

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

Вы можете использовать параметры таблицы ячейки и таблицы строк дисплея для форматирования, как вам нравится:

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