英文:
Css card not resizing when text increases
问题
我使用flex使卡片居中，并尝试增加文本的大小，但发现卡片不会调整大小以适应文本，而是保持不变。
英文:
I am designing a pricing page.
If I increase the text the card will not expand, making it look like this:
<a href="https://i.stack.imgur.com/87O1h.png"><img src="https://i.stack.imgur.com/87O1h.png"></a>
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.pricing-box {
margin: 5rem 0rem;
}
.pricing-box header {
margin-bottom: 2rem;
text-align: center;
}
.pricing-box .card-container {
display: flex;
justify-content: center;
width: 100%;
flex-wrap: wrap;
align-items: center;
}
.pricing-box .card-container .card:nth-of-type(2) {
margin-left: 0px;
box-shadow: none;
transform: scale(1.1);
z-index: 2;
}
.pricing-box .card-container .card {
width: 100%;
}
.pricing-box .card-container ul {
margin: 2.6px;
}
.pricing-box .card-container ul li {
list-style: none;
margin-top: 1rem;
}
.pricing-box .card-container ul li.price {
font-size: 3rem;
}
<!-- language: lang-html -->
<div class="pricing-box">
<header>
<h1>Our Pricing</h1>
</header>
<div class="row"></div>
<div class="card-container">
<div class="card shadow">
<ul>
<li class="pack">Basic</li>
<li id="basic" class="price bottom-bar">
$dollar; 199.99
</li>
<li class="bottom bar">5600 GB Storage</li>
<li class="bottom bar">2 Users Allowed</li>
<li class="bottom bar">Send up to 3 GB</li>
<li>
<button class="btn">Learn More</button>
</li>
</ul>
</div>
</div>
</div>
<!-- end snippet -->
I centered the card using flex, and I tried to increase the size of the text and found that the card does not resize to accommodate the text while I tried to increase the size of the text.
答案1
得分: 1
看起来价格卡已经设置为100%宽度，因此增加文本不应该导致卡片扩展。但是，如果文本变得太长，可能会溢出并引起布局问题。
为了避免这种情况，您可以为价格卡设置最大宽度，并在价格元素上添加"text-overflow"和"overflow"属性来处理较长的价格。
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<!DOCTYPE html>
<html>
<head>
<title>Pricing Page</title>
<style>
.pricing-box {
margin: 5rem 0rem;
}
.pricing-box header {
margin-bottom: 2rem;
text-align: center;
}
.pricing-box .card-container {
display: flex;
justify-content: center;
width: 100%;
flex-wrap: wrap;
align-items: center;
}
.pricing-box .card-container .card:nth-of-type(2) {
margin-left: 0px;
box-shadow: none;
transform: scale(1.1);
z-index: 2;
}
.pricing-box .card-container .card {
width: 100%;
max-width: 400px;
}
.pricing-box .card-container ul {
margin: 2.6px;
}
.pricing-box .card-container ul li {
list-style: none;
margin-top: 1rem;
}
.pricing-box .card-container ul li.price {
font-size: 3rem;
max-width: 100%;
/* allow the price element to take up the full width of the card */
text-overflow: ellipsis;
/* add an ellipsis if the price overflows */
overflow: hidden;
/* hide the overflow of the price element */
}
.btn {
background-color: #4CAF50;
border: none;
color: white;
padding: 12px 30px;
cursor: pointer;
font-size: 16px;
}
.btn:hover {
background-color: #3e8e41;
}
</style>
</head>
<body>
<div class="pricing-box">
<header>
<h1>Our Pricing</h1>
</header>
<div class="row"></div>
<div class="card-container">
<div class="card shadow">
<ul>
<li class="pack">Basic</li>
<li id="basic" class="price bottom-bar">
$dollar; 199.99 per month
</li>
<li class="bottom bar">5600 GB Storage</li>
<li class="bottom bar">2 Users Allowed</li>
<li class="bottom bar">Send up to 3 GB</li>
<li>
<button class="btn">Learn More</button>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
<!-- end snippet -->
希望这个答案对您有帮助。
英文:
It seems that the pricing card is already set to be 100% width, so increasing the text should not cause the card to expand. However, if the text becomes too long, it might overflow and cause layout issues.
To avoid this, you can set a maximum width for the pricing card and add text-overflow and overflow properties to the price element to handle long prices.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<!DOCTYPE html>
<html>
<head>
<title>Pricing Page</title>
<style>
.pricing-box {
margin: 5rem 0rem;
}
.pricing-box header {
margin-bottom: 2rem;
text-align: center;
}
.pricing-box .card-container {
display: flex;
justify-content: center;
width: 100%;
flex-wrap: wrap;
align-items: center;
}
.pricing-box .card-container .card:nth-of-type(2) {
margin-left: 0px;
box-shadow: none;
transform: scale(1.1);
z-index: 2;
}
.pricing-box .card-container .card {
width: 100%;
max-width: 400px;
}
.pricing-box .card-container ul {
margin: 2.6px;
}
.pricing-box .card-container ul li {
list-style: none;
margin-top: 1rem;
}
.pricing-box .card-container ul li.price {
font-size: 3rem;
max-width: 100%;
/* allow the price element to take up the full width of the card */
text-overflow: ellipsis;
/* add an ellipsis if the price overflows */
overflow: hidden;
/* hide the overflow of the price element */
}
.btn {
background-color: #4CAF50;
border: none;
color: white;
padding: 12px 30px;
cursor: pointer;
font-size: 16px;
}
.btn:hover {
background-color: #3e8e41;
}
</style>
</head>
<body>
<div class="pricing-box">
<header>
<h1>Our Pricing</h1>
</header>
<div class="row"></div>
<div class="card-container">
<div class="card shadow">
<ul>
<li class="pack">Basic</li>
<li id="basic" class="price bottom-bar">
$dollar; 199.99 per month
</li>
<li class="bottom bar">5600 GB Storage</li>
<li class="bottom bar">2 Users Allowed</li>
<li class="bottom bar">Send up to 3 GB</li>
<li>
<button class="btn">Learn More</button>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
<!-- end snippet -->
I hope this answer is helpful to you.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论