Question

我现在已经搜索了这个问题很长一段时间了，但只找到了相反问题的解决方案。

所以这是我的问题：

我有一个侧面板，应该只有它的内容宽。此面板有一个标题，标题可能很长。该标题不应展开面板，而应省略。

HTML看起来与此类似

<div class="outer">
  <div class="inner">
    <div class="header">
      superlongtextthatshouldbeellipsed
    </div>
    <div class="line">
      short text
    </div>
    <div class="line">
      even shorter text
    </div>
  </div>
</div>

这是用于演示问题的CSS

.outer {
  background-color: #FFAAAA;
  display: flex;
  flex-direction: row;
}
.inner {
  background-color: #AAAAFF;
  display: flex;
  flex-direction: column;
  margin: 5px;
}
.header {
  margin: 5px;
  background-color: #AAFFAA;
  white-space: nowrap;
  overflow: none;
  text-overflow: ellipsis;
}
.line {
  margin: 5px;
  background-color: #FFAAFF;
}

https://jsfiddle.net/1yn725hy/9/

在小提琴中，蓝色框应该与第二个紫色框（+边距）一样宽。绿色框中的文本应为椭圆形。

我该怎么做？

编辑：只是为了澄清：蓝色框应该适合具有不同大小的紫色框的内容。固定宽度不能解决问题。

Answer 1

首先，您的容器必须修复max-width或width。其次，overflow必须是hidden而不是none：

＆＃13;

.outer {
  background-color: #FFAAAA;
  display: flex;
  flex-direction: row;
}

.inner {
  background-color: #AAAAFF;
  display: flex;
  flex-direction: column;
  margin: 5px;
}

.header {
  margin: 5px;
  background-color: #AAFFAA;
  white-space: nowrap;
  max-width:200px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.line {
  margin: 5px;
  background-color: #FFAAFF;
}

＆＃13;

<div class="outer">
  <div class="inner">
    <div class="header">
      superlongtextthatshouldbeellipsed
    </div>
    <div class="line">
      short text
    </div>
    <div class="line">
      even shorter text
    </div>
  </div>
</div>

＆＃13;

Answer 2

好的，终于自己解决了。诀窍是使用全能的flexbox并在其中包装标题：

＆＃13;

.outer {
  background-color: #FFAAAA;
  display: flex;
  flex-direction: row;
}

.inner {
  background-color: #AAAAFF;
  display: flex;
  flex-direction: column;
  margin: 5px;
}

.header {
  margin: 5px;
  background-color: #AAFFAA;
  display: flex;
}

.header2 {
  width: 0px;
  flex-grow: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.line {
  margin: 5px;
  background-color: #FFAAFF;
}

＆＃13;

<div class="outer">
  <div class="inner">
    <div class="header">
      <div class="header2">
        superlongtextthatshouldbeellipsed
      </div>
    </div>
    <div class="line">
      short text
    </div>
    <div class="line">
      even shorter text
    </div>
  </div>
</div>

＆＃13;

Answer 3

您应该在div中添加一些width。否则标题文本不会被省略，因为没有“结束”。

https://jsfiddle.net/1yn725hy/14/

使div不展开父

3 个答案: