I am trying to style a table in a specific way, but I'm facing some challenges.
- First, I want to make the internal div inside the table square with a percentage height.
- Next, I need to have two paragraphs stacked on top of each other within the same div.
- Additionally, I want the font size inside these paragraphs to automatically adjust based on the content length.
- Lastly, I would like any long text to be ellipsized if it exceeds a certain length.
Everything is working as expected except for item #2. I've tried various solutions from different sources such as this link, this one, and this post. Despite my efforts, I can't seem to get the paragraphs to stack vertically.
In the provided screenshots:
https://i.sstatic.net/tAzdP.png https://i.sstatic.net/6Wvxe.pngPlease excuse the rough image quality as I'm not skilled at using graphic design software. My goal is to align the title at the top of the box with 100% width, while the longer text should fill the remaining space below it also with 100% width.
body {
margin: 0 auto;
height: 100%;
width: 100%;
background-color: lightgray;
}
td {
border: 1px solid black;
}
.card-stack {
width: 8%;
height: 20vh;
}
.card {
display: flex;
justify-content: center;
align-items: center;
margin: auto;
width: 70%;
height: 0;
padding-bottom: 70%;
background-color: darkgray;
border: 1px solid green;
}
.card-title {
clear: both;
width: 100%;
height: 33%;
float: left;
}
.card-title p {
display: block;
border: 1px solid red;
font-size: 1vw;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
}
.card-text p {
border: 1px solid purple;
font-size: 1vw;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
line-clamp: 3;
-webkit-box-orient: vertical;
}
.card-text {
clear: both;
width: 100%;
height: 67%;
float: left;
}<body>
<table width="100%">
<tr>
<td id="opponent-deck" class="card-stack">
<div class="card">
<div class="card-title">
<p>Title</p>
</div>
<div class="card-text">
<p>This is long text</p>
</div>
</div>
</td>
<td id="opponent-hand" class="hand" "></td>
<td id="opponent-disc " class="card-stack "></td>
</table>
</body>