Question

我很难描述没有图像的情况：

某些背景-这些是我无法更改或不想更改的事情：

我在我的博客首页上使用此卡片布局。卡的宽度由javascript计算（根据不同的屏幕宽度），因此CSS未知，高度等于宽度（我希望卡为正方形），图像的比例始终为16：9。在内容区域中，标题不换行，页脚只是日期，但是文本的长度是未知的（未知，因为每个博客帖子的介绍性文本长度都可以不同。此外，在宽屏中和卡片的宽度更大，我想显示更多的介绍性文字，以使空间被填充）

问题

如果文本太长或卡的宽度太小（在较小的屏幕上），即使我将其设置为“ overflow：hidden”，文本也会从容器中伸出，并且页脚将被向下推。

那么，如果文本对于卡的宽度而言过长，那么如何确保文本div不会压低页脚？（又名，我如何确保其高度等于卡片的高度减去图片的高度减去标题div的高度和减去页脚div的高度）。使用javascript应该不难，但是可以使用纯CSS做到吗？通过使文本div增长，Flexbox似乎很方便，但是它并没有按我认为的那样工作，请看此fiddle-如果不为flex容器设置固定的高度，它将不起作用。 fiddle，其中为flex容器设置了一定的高度。代码在这里：

<style>
.card{
  border:1px solid #000
}
.container{
  padding-top:100%;
  position:relative;

}
.item{
  top:0;bottom:0;left:0;right:0;position:absolute
}
.teaser{
  padding-top:56.25%;
  background-image:url('http://placehold.it/320x180?text=%20');
}
.content{
  display:flex;
  flex-direction:column;
  height:150px;   /* fixed height makes it work */
}
.title{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.title, .intro, .info{padding:10px}
.intro{overflow:hidden}
</style>
<div class="card" style="width:360.25px">  <!-- width calculated by javascript -->
  <div class="container">
    <div class="item">
      <div class="teaser">

     </div>
     <div class="content">
        <div class="title">
          A Blog Title A Blog Title A Blog Title A Blog Title A Blog Title A Blog Title A Blog Title A Blog Title A Blog Title 
        </div>
        <div class="intro">
          Some Intro text Some Intro textSome Intro textSome Intro textSome Intro textSome Intro textSome Intro textSome Intro textSome Intro textSome Intro textSome Intro textSome Intro textSome Intro textSome Intro textSome Intro textSome Intro textSome Intro textSome Intro textSome Intro textSome Intro textSome Intro textSome Intro textSome Intro textSome Intro textSome Intro textSome Intro textSome Intro textSome Intro textSome Intro textSome Intro textSome Intro textSome Intro textSome Intro textSome Intro textSome Intro textSome Intro textSome Intro textSome Intro textSome Intro textSome Intro textSome Intro textSome Intro textSome Intro textSome Intro textSome Intro textSome Intro text
        </div>
        <div class="info">
            <time>2019-10-23</time>
        </div>   
     </div>
    </div>
  </div>
</div>

可以通过纯CSS解决此问题吗？

Answer 1

// you have not set min and max height of that container please add max and min height of intro.div it will work.

.intro {
    overflow: hidden;
    min-height: 65px;
    max-height: 60px;
}

Answer 2

我不确定我是否正确理解了这个问题，但是您是否可以添加 flex-wrap:wrap;到您的.title, .intro

.title{flex-wrap:wrap;}
.intro{flex-wrap:wrap;}

并删除容器填充，它应该可以工作...

.card{
  border:1px solid #000
}
.container{
 /* padding-top:100vh;*/
  position:relative;

}
.item{
 /*  top:0;bottom:0;left:0;right:0;position:absolute */
}
.teaser{
  padding-top:56.25%;
  background-image:url('http://placehold.it/320x180?text=%20');
}
.content{
  display:flex;
  flex-direction:column;

}
.title{flex-wrap:wrap;}
.title, .intro, .info{padding:10px}
.intro{flex-wrap:wrap;}

https://jsfiddle.net/6q0tLobr/

高度未知的容器中的文本元素

2 个答案: