代码之家 › 专栏 › 技术社区 › jsf

使div不展开父级

flexbox css html

jsf · 技术社区 · 7 年前

我搜索这个问题已经有一段时间了,但只找到了相反问题的解决方案。

所以我的问题是:

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

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/

在小提琴中,蓝色框应与第二个紫色框一样宽(+边距)。绿色框中的文本应省略号。

我该怎么做?

编辑:只是澄清一下:蓝色框应该与紫色框的内容相匹配,紫色框的大小不同。固定宽度不能解决问题。

3 回复 | 直到 7 年前

aMJay 7 年前

首先,您的容器必须 max-width 或 width 固定的其次是你的 overflow 必须是 hidden 而不是 none :

.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;
}

<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>

jsf 7 年前

好了,最后我自己解决了。诀窍是使用万能的flexbox并将标题包裹在其中:

.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;
}

<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>

dudster 7 年前

你应该加一些 width 否则标题文本不会省略,因为没有“结束”。

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

推荐文章

JWWalker · CSS的resize属性可以用来调整flex列宽吗?

11 月前

Sidaqpreet Singh · 为什么当设置为包裹时,柔性包裹会导致横轴出现间隙?

1 年前

rifx · 在kendoTreeViewNodeTemplate(Angular)中设置数据项的样式

1 年前

Fox L · 每行4个项目,但如果少于4个项目则留空?

1 年前

Zack Riquelme · 如何使用CSS将HTML的<header>中的<a>和<nav>内容在同一个父框中左右拆分?

1 年前

JobHunter69 · 为什么这个组件不填充整个宽度?

1 年前

Vasantha Kalyani · Flexbox Html CSS设置位置问题[重复]

1 年前

coder · 边界半径不适用于容器元素

1 年前

user9026 · 项目登录页面(freecodecamp)定价设计

1 年前

Bo Thompson · 根据需要调整柔性物品的高度,但不得超过容器

1 年前