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的宽度必须保持固定为300px。

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

第二列包含文字。这段文字的长度可能会有所不同。如果文本太长，则显示省略号。如果第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列将展开。

div表中的可变单元格宽度

2 个答案: