Question

我希望在CSS中创建一个动态布局，使用文本溢出截断浮动div中的文本：省略以考虑兄弟元素大小的方式

布局由3个div组成

|--------------------A-------------------|
||------B------||-------C-------|        |
|| Hello world || Goodbye world |        |
||-------------||---------------|        |
|----------------------------------------|

Div A：Wrapper parent
Div B：显示尽可能多的内容，如果空间不足则截断为省略号
Div C：所有这些内容应始终可见。该内容的宽度不固定（但总是小于div A宽度的50％）。如果B中的内容未被截断，则此div应直接位于div B旁边。

如果div B应截断文本，我希望它看起来像：

|--------------------A-------------------|
||------B--------------||-------C-------||
|| Hello world this ...|| Goodbye world ||
||---------------------||---------------||
|----------------------------------------|

我可以设置一般布局，但我的问题是我无法触发Div B在需要时截断内容。到目前为止我的代码：

#wrapper {
  max-width: 300px;
}
#div-b {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  float: left;
  margin-right: 5px;
}
#div-c {
  color: #6a7d80;
  white-space: nowrap;
}

<div id="wrapper">
  <div id="div-b">This is my really long message hello world hello world hello world </div>
  <div id="div-c">Goodbye world</div>
</div>

为div B添加max-width有效，但问题是div C中的内容确实发生了变化，所以我不能硬编码在所有情况下都适用的max-width值。

我开始认为没有javascript就不可能。有什么想法吗？

Answer 1

只需使用flexible boxes：

#wrapper {
    display: flex;
}

.wrapper {
  display: flex;
  border: 1px solid red;
}
.w1 {
  max-width: 300px;
  margin-bottom: -1px;
}
.w2 {
  max-width: 600px;
}
.div-b {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  margin-right: 5px;
}
.div-c {
  color: #6a7d80;
  white-space: nowrap;
}

<div class="wrapper w1">
  <div class="div-b">This is my really long message hello world hello world hello world </div>
  <div class="div-c">Goodbye world</div>
</div>
<div class="wrapper w2">
  <div class="div-b">This is my really long message hello world hello world hello world </div>
  <div class="div-c">Goodbye world</div>
</div>

这对Firefox来说已经足够了。但对于webkit浏览器，您可能还需要

#div-b {
    width: 0;               /* Reduce width as much as necessary */
    flex-grow: 1;           /* Grow to fill remaining space */
    max-width: max-content; /* But don't grow too much */
}

请注意，max-content的浏览器支持非常有限，目前需要供应商扩展。

.wrapper {
  display: flex;
  border: 1px solid red;
}
.w1 {
  max-width: 300px;
  margin-bottom: -1px;
}
.w2 {
  max-width: 600px;
}
.div-b {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  margin-right: 5px;
  width: 0;
  flex-grow: 1;
  max-width: -moz-max-content;
  max-width: -webkit-max-content;
  max-width: max-content;
}
.div-c {
  color: #6a7d80;
  white-space: nowrap;
}

<div class="wrapper w1">
  <div class="div-b">This is my really long message hello world hello world hello world </div>
  <div class="div-c">Goodbye world</div>
</div>
<div class="wrapper w2">
  <div class="div-b">This is my really long message hello world hello world hello world </div>
  <div class="div-c">Goodbye world</div>
</div>

使用省略号截断浮动的div内容

1 个答案: