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

Question

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

在 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 行高，但行应该更靠近。填充太多？如果我将它们设为零，它看起来仍然很糟糕。我该如何解决这个问题，所以线条彼此更接近？ 解决了

3. 在我的 CSS 代码中，我有字体，但我无法让它与不同的表格单元格一起工作。

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

$( init );

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

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

这是一个显示问题所在的示例

标签： javascripthtmlcss