CSS Grid - Text Überlauf auf der rechten Seite

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

Manchmal verhindern, cardintro Inhalt (Lorem ipsum ...) ist zu lang und die Höhe des gesamten card ändern.

Ich mag die maximale Höhe der gesamten card die Höhe von imgcard sein, die nicht festgelegt ist, und die Höhe der über diese Karte Überlauf von cardintro Text zu verhindern.

Ich nehme an, das ist durch Javascript lösbar, aber ich hoffe, grid-template-rows oder irgendwie mit CSS.

Irgendwelche Hilfe?

Answer 1

Sie können die absolute Positionierung des cardright div verwenden, das cardintro enthält, und den Überlauf auf der Karte festlegen. Hier ist ein Ausschnitt mit der gleichen Menge Text auf drei Karten, die alle unterschiedliche Bildhöhe haben.

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