代码之家 › 专栏 › 技术社区 › Michael Edwards

具有水平隐藏溢出的可变高度HTML元素css

css html

Michael Edwards · 技术社区 · 15 年前

我需要隐藏HTML元素的水平溢出,而不是垂直溢出。所以假设我有以下HTML:

<div class="container">
  <div class="inner">
    <p>content 1</p>
  </div>
  <div class="inner">
    <p>content 2</p>
    <p> and then some more stuff</p>
  </div>
</div>

我想使用的CSS类似于:

.container{
  overflow:hidden;
  width:100px;
}
.inner{
  width:200px;
}

我的问题是元素div.container高度为零,因为我没有在css中定义高度。但是,容器中内容的高度可能是可变的,因此我无法设置特定的高度。

我可以使用javascript动态设置元素的高度,但我想避免这样做。

2 回复 | 直到 15 年前

Krule 15 年前

由于没有高度(它是一个变量),Y轴不会溢出,因此不需要它。容器将简单地在y上展开,只要它需要适应内部内容,所以即使强制使用 overflow:visible; 或 overflow-y:visible; 它将没有滚动条。

如果你需要垂直溢出必须 ,至少,指定 max-height:<value>.<units>; 和; overflow-y:auto; overflow-x:hidden; ,这样,如果内容在Y轴上溢出,它将显示滚动条。

Pekka 15 年前

也许你可以尝试一下削减 ?我没有这方面的经验,所以你得试试。

.container
  {
    clip:rect(0px, 100px, auto, 0px);
   }

有overflow-x和overflow-y属性,但仅在css3中存在。据我所知,FF已经正确地解释了它们。

推荐文章

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

7 月前

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

7 月前

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

7 月前

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

7 月前

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

7 月前

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

7 月前

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

7 月前

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

7 月前

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

7 月前

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

7 月前