css grid - 防止文本在右侧溢出

Question

<div class='card'>
<div class='cardleft'><img class='imgcard' src="..." alt='img'></div>
<div class='cardright'>
    <div class='cardtitle'>TITLE</div>
    <div class='cardintro'>lorem ipsum...</div>
</div>
</div>

CSS

.card{
    display:grid;
    grid-template-columns: 320px auto;
}

.imgcard{
    display:block;
    width:100%;
    margin:0 auto;
}

.cardright{
    overflow:hidden;
}

.cardintro{
    margin-top:9px;
}

有时，cardintro 内容(lorem ipsum...)太长，会改变整个card 的高度。

我想让整个card的max-height是imgcard的高度，不固定，防止cardintro文字溢出超过该卡片的高度。

我想这可以通过 javascript 解决，但我希望通过 grid-template-rows 或以某种方式使用 css。

有什么帮助吗？

Answer 1

您可以使用包含 cardintro 的 cardright div 的绝对定位，并设置隐藏在卡片上的溢出。这是一个片段，其中三张卡片上的文本数量相同，但图像高度都不同。

.card {
  display: block;
  position: relative;
  overflow: hidden;
  margin-bottom: 20px;
}

.imgcard {
  display: block;
  width: 100%;
  margin: 0 auto;
}

.cardright {
  position: absolute;
  left: 330px;
  top: 0;
  right: 0;
  bottom: 0;
  height: 100%;
}

.cardleft {
  display: inline-block;
  width: 320px;
}

.cardintro {
  margin-top: 9px;
}

<div class='card'>
  <div class='cardleft'><img class='imgcard' src="http://via.placeholder.com/320x150" alt='img'></div>
  <div class='cardright'>
    <div class='cardtitle'>TITLE</div>
    <div class='cardintro'>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque rutrum metus vitae elit pellentesque pellentesque. Donec vulputate, mi fringilla mattis tincidunt, tellus metus placerat orci, sit amet tincidunt nisl nulla ultrices leo. Duis vitae
        porttitor tortor, et imperdiet orci. In eget laoreet turpis, a porttitor metus. Aliquam vitae volutpat mi. Curabitur pellentesque arcu ex, sit amet efficitur ligula porta in. Cras metus justo, eleifend vitae ante non, congue commodo risus. In
        hac habitasse platea dictumst. Proin cursus at nulla sed pretium. Maecenas semper nibh ut velit interdum varius. Sed tempus mi sit amet pellentesque rutrum. Phasellus placerat id ipsum quis tempor.</p>
      <p>Curabitur est ex, rutrum vel lacus eu, imperdiet dapibus libero. Donec cursus mattis finibus. Cras eget felis et orci consectetur egestas sit amet sed sem. Phasellus ultricies mi eu mauris posuere, sit amet facilisis ante lobortis. Etiam et quam
        id sapien gravida lacinia ut non diam. Etiam sit amet iaculis quam, in malesuada erat. Aliquam tristique aliquet elit, vitae maximus enim vestibulum non. Phasellus vitae iaculis orci. Integer in consequat odio, at dapibus quam.</p>
    </div>
  </div>
</div>

<div class='card'>
  <div class='cardleft'><img class='imgcard' src="http://via.placeholder.com/320x250" alt='img'></div>
  <div class='cardright'>
    <div class='cardtitle'>TITLE</div>
    <div class='cardintro'>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque rutrum metus vitae elit pellentesque pellentesque. Donec vulputate, mi fringilla mattis tincidunt, tellus metus placerat orci, sit amet tincidunt nisl nulla ultrices leo. Duis vitae
        porttitor tortor, et imperdiet orci. In eget laoreet turpis, a porttitor metus. Aliquam vitae volutpat mi. Curabitur pellentesque arcu ex, sit amet efficitur ligula porta in. Cras metus justo, eleifend vitae ante non, congue commodo risus. In
        hac habitasse platea dictumst. Proin cursus at nulla sed pretium. Maecenas semper nibh ut velit interdum varius. Sed tempus mi sit amet pellentesque rutrum. Phasellus placerat id ipsum quis tempor.</p>
      <p>Curabitur est ex, rutrum vel lacus eu, imperdiet dapibus libero. Donec cursus mattis finibus. Cras eget felis et orci consectetur egestas sit amet sed sem. Phasellus ultricies mi eu mauris posuere, sit amet facilisis ante lobortis. Etiam et quam
        id sapien gravida lacinia ut non diam. Etiam sit amet iaculis quam, in malesuada erat. Aliquam tristique aliquet elit, vitae maximus enim vestibulum non. Phasellus vitae iaculis orci. Integer in consequat odio, at dapibus quam.</p>
    </div>
  </div>
</div>

<div class='card'>
  <div class='cardleft'><img class='imgcard' src="http://via.placeholder.com/320x350" alt='img'></div>
  <div class='cardright'>
    <div class='cardtitle'>TITLE</div>
    <div class='cardintro'>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque rutrum metus vitae elit pellentesque pellentesque. Donec vulputate, mi fringilla mattis tincidunt, tellus metus placerat orci, sit amet tincidunt nisl nulla ultrices leo. Duis vitae
        porttitor tortor, et imperdiet orci. In eget laoreet turpis, a porttitor metus. Aliquam vitae volutpat mi. Curabitur pellentesque arcu ex, sit amet efficitur ligula porta in. Cras metus justo, eleifend vitae ante non, congue commodo risus. In
        hac habitasse platea dictumst. Proin cursus at nulla sed pretium. Maecenas semper nibh ut velit interdum varius. Sed tempus mi sit amet pellentesque rutrum. Phasellus placerat id ipsum quis tempor.</p>
      <p>Curabitur est ex, rutrum vel lacus eu, imperdiet dapibus libero. Donec cursus mattis finibus. Cras eget felis et orci consectetur egestas sit amet sed sem. Phasellus ultricies mi eu mauris posuere, sit amet facilisis ante lobortis. Etiam et quam
        id sapien gravida lacinia ut non diam. Etiam sit amet iaculis quam, in malesuada erat. Aliquam tristique aliquet elit, vitae maximus enim vestibulum non. Phasellus vitae iaculis orci. Integer in consequat odio, at dapibus quam.</p>
    </div>
  </div>
</div>