div 表中的可变单元格宽度

Question

这是我的代码的链接：

https://jsfiddle.net/Deepview/hr111npf/19/

html:

<div style="width: 300px; height:54px; border: 1px solid">
  <div style="display:table; width:100%">
    <div style="display:table-row; width:100%">
      <div id="div1" style="display: table-cell; width 50px; background-color: #c0c0c0;">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a8/Face-kiss.svg/50px-Face-kiss.svg.png"/>      
      </div>
      <div id="div2" style="display: table-cell; width: 100%; background-color: #ffff00; vertical-align: middle; " >
        <div class="caption">This is a long sentence that should get clipped and ellipsis shown</div>
      </div>
      <div id="div3" style="display: table-cell; width: 14px; background-color: #b8eaff; vertical-align: middle">
        <img src="http://reports.tofg.com/i/themes/theme_51/css/blue/images/icons-png/arrow-l-black.png"/> 
      </div>
      <div id="div4" style="display: table-cell; width: 14px; background-color: #ffcccc; vertical-align: middle">
        <img src="https://www.monstermoto.com/img/arrow_red.png"/> 
      </div>
    </div>
  </div>
</div>

css:

.caption {
    font-size: 1.03em;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    padding-left: 5px; 
    width: 100%;
    max-width: 230px;
}

外部 div 的宽度必须保持固定在 300 像素。

我有一个由单行 4 列组成的 div 表。第一列有一个宽度固定的图像。最后两列是也具有固定宽度的图像。但是，必须始终显示最右边的最后一个图像，而它旁边的图像可能会显示或隐藏。如果它是隐藏的，它不能占用任何宽度空间（好像单元格甚至不存在一样）。

第二列包含文本。此文本的长度可能会有所不同。如果文本太长，将显示省略号。如果第 3 列中的图像可见，则必须缩短其左侧文本的宽度。如果图像不可见，则需要增加文本宽度，使其在最后一列中的图像旁边结束。

在保留省略号的同时，我无法成功让文本的宽度自动调整。另一个问题是，如果文本比示例中的大得多，最后两列中的图像会被推到表格之外。

关于如何让第二列自动调整其宽度而不导致最后两列中的图像移动或丢失省略号的任何提示？

我可以用 javascript 解决这个问题，但我正在寻找一个普通的 css 解决方案。

Answer 1

我会为此使用 flexbox，它会简化你的 html 结构和 css：

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  width: 300px;
  max-width: 300px;
}

.cell {
  /* this centres the content */
  display: flex;
  justify-content: center;
  align-items: center;
}

.div1 {
  background-color: #c0c0c0;
}

.div2 {
  /* this expands the cell to take all the row's remaining space */
  flex-grow: 1;
  /* add this so the child ellipsis works - weird hack found here - https://css-tricks.com/flexbox-truncated-text/ */
  min-width: 0;
  background-color: #ffff00;
}

.div3 {
  background-color: #b8eaff;
}

.div4 {
  background-color: #ffcccc;
}

.caption {
  box-sizing: border-box;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  padding-left: 5px;
}

<div class="row">
  <div class="div1 cell">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a8/Face-kiss.svg/50px-Face-kiss.svg.png" />
  </div>
  <div class="div2 cell">
    <div class="caption">This is a long sentence that should get clipped and ellipsis shown</div>
  </div>
  <div class="div3 cell">
    <img src="http://reports.tofg.com/i/themes/theme_51/css/blue/images/icons-png/arrow-l-black.png" />
  </div>
  <div class="div4 cell">
    <img src="https://www.monstermoto.com/img/arrow_red.png" />
  </div>
</div>
<div class="row">
  <div class="div1 cell">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a8/Face-kiss.svg/50px-Face-kiss.svg.png" />
  </div>
  <div class="div2 cell">
    <div class="caption">This is a long sentence that should get clipped and ellipsis shown</div>
  </div>
  <div class="div3 cell">
  </div>
  <div class="div4 cell">
    <img src="https://www.monstermoto.com/img/arrow_red.png" />
  </div>
</div>

Answer 2

将以下内容添加到标题中，应该修复它：

.caption {
    max-width: 222px;
    box-sizing: border-box;
}

编辑：这是一个替代解决方案，表格布局允许隐藏第 3 列并自动展开第 2 列：

首先，对于标题，不要设置max-width，保持width设置为auto（无宽度）。

.caption {
    font-size: 1.03em;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    padding-left: 5px; 
    /*width: 100%;*/
    /*max-width: 230px;*/
}

其次，对于第二列div2，保持width 设置为auto（无宽度）。

最后，为表格添加table-layout: fixed;。

顺便说一句，div1 的宽度 width 50px; 缺少冒号 (:)。

这是demo。现在如果你添加display: none或者删除第3列，第2列就会展开。