代码之家 › 专栏 › 技术社区 › 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/

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

10 月前

Jamie · 在CSS链接的文件名中添加Jinja占位符

10 月前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

11 月前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

11 月前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

11 月前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

11 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

11 月前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

11 月前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

11 月前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

11 月前