如何调整CSS div表以使多行文本很好地适合？

Question

我有一个div作为固定大小的容器。里面有一张表，是用div建立的。

请参见here at JSFiddle

@font-face {
  font-family: "Roboto";
  src: url('Roboto-Medium.woff2') format('woff2'), url('Roboto-Medium.woff') format('woff');
  font-weight: 500
}

#absoluteTable {
  font-family: Roboto;
  font-size: 32px;
  font-weight: 400;
  font-style: normal;
  text-decoration: none;
  text-transform: none;
  color: #000;
  background-color: f0f0f0;
  line-height: 38px;
  letter-spacing: normal;
  text-shadow: none;
  position: absolute;
  top: 100px;
  left: 274px;
  width: 685px;
  height: 500px;
  border: 1px solid #ffAD21;
}

#absoluteTable2 {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 100px;
  height: 500px;
  border: 5px solid #ff0000;
}

#absoluteTable p {}

#para1 {
  background-color: #b8c8d2;
  border: 1px solid #00ff00;
  text-align: center;
  color: red;
  height: =20px;
  font-size: 14px;
}

div.priceTable {
  table-layout: fixed;
  width: 685px;
  text-align: left;
  border-collapse: collapse;
}

.divTable.priceTable .divTableCellDescr,
.divTable.priceTable .divTableCellName,
.divTable.priceTable .divTableCellPrice {
  /*border: 1px solid #AAAAAA;*/
  /*display: table-cell;*/
}

.divTable.priceTable .divTableBody .divTableCellName {
  font-size: 16px;
  padding: 8px 8px 2px 2px;
  color: #f00;
  text-overflow: ellipsis;
}

.divTable.priceTable .divTableBody .divTableCellDescr {
  font-size: 12px;
  padding: 1px 9px 2px 35px;
  color: #333;
}

.divTable.priceTable .divTableBody .divTableCellPrice {
  font-size: 18px;
  padding: 1px 2px 1px 15px;
  vertical-align: bottom;
  color: #333;
  width: 55px;
  display: table-cell;
}

.divTable {
  display: table;
}

.divTableRow {
  display: table-row;
  /* overflow: auto; */
}

.divTableBody {
  display: table-row-group;
}

<div class="divTable priceTable">
  <div class="divTableBody">
    <div class="divTableRow">
      <div class="divTableCellName">cell1_1</div>
      <div class="divTableCellDescr">cell2_1</div>
      <div class="divTableCellPrice">cell3_1</div>
    </div>
    <div class="divTableRow">
      <div class="divTableCellName">cell1_2</div>
      <div class="divTableCellDescr">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tincidunt lorem enim, eget fringilla turpis congue vitae. </div>
      <div class="divTableCellPrice">€234</div>
    </div>
    <div class="divTableRow">
      <div class="divTableCellName">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tincidunt lorem enim,</div>
      <div class="divTableCellDescr"><strong>cell2_3</strong></div>
      <div class="divTableCellPrice">€0.13</div>
    </div>
    <div class="divTableRow">
      <div class="divTableCellName">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tincidunt lorem enim vitae.</div>
      <div class="divTableCellDescr">Lorem ipsum dolor sit amet, consectetur ad</div>
      <div class="divTableCellPrice">cell3_4</div>
    </div>
  </div>
</div>

我确实有以下问题：

已解决 1。如果来自CelX_1（第1列）的文本太长，我看不到椭圆，则文本的其余部分移至新行。应该将其缩短为“ ...”，并且仅增加一个行的高度 已解决

已解决 2。第二个表字段/列的高度可以根据需要设置为3-4行，但这些行应更靠近在一起。填充太多？如果我将它们设置为零，它看起来仍然很糟糕。我该如何解决，使线条彼此靠近？ 已解决

1. 在我的CSS代码中，我在那里有字体，但是我无法使其与其他表格单元格一起使用。

此外，生成的布局正是我所需要的，但这是正确的方法吗？该代码将使用

进行压缩

$( init );

function init() {
$('#absoluteTable p').replaceWith( "My Code ....

顺便说一句，有没有一种方法在我使用replace with时不需要从替换代码中删除空格？

这里有一个示例来说明出了什么问题