所以我在下面得到了片段，運行得很好，這樣你就可以看到問題了。忽略空白影像等等，問題出在 .wrapper 類
如您所見，我一直在練習網格并掌握了排列框的基礎知識:) 我正在嘗試做的是從這些框中截斷文本以停止運行。實作這一目標的最佳方法是什么？顯然在這里你可以看到我嘗試隱藏溢位，但是你可以看到它仍然由于某種原因在實際框的邊界之外剪輯。也許這是一個javascript修復？我不確定。請幫忙。謝謝！
.box1 {
font-size: 37px;
font-weight: 900;
padding-top: 5px;
padding-bottom: 5px;
align-items: center;
width: 323px;
max-height: 106px;
border-radius: 5px;
min-height: 50px;
grid-column: 1/4;
text-align: center;
color: black;
background: black;
box-shadow: 0px 0px 5px rgb(122, 244, 255);
border: 1px solid rgb(122, 244, 255);
color: white;
}
.box2 {
grid-column: 1 / 2;
width: 220px;
height: 247px;
border-radius: 4px;
box-shadow: 0px 0px 5px rgb(122, 244, 255);
border: 1px solid rgb(122, 244, 255);
color: blanchedalmond;
}
.box3 {
font-size: 28px;
width: 86px;
max-height: 247px;
word-wrap: break-word;
grid-column: 2/3 ;
color: rgba(0, 0, 0, 0.397);
background: black;
box-shadow: 0px 0px 5px rgb(122, 244, 255);
border: 1px solid rgb(122, 244, 255);
border-radius: 5px;
color: white;
padding-left: 10px;
}
.box4 {
font-size: 28px;
width: 314px;
max-height: 108px;
word-wrap: break-word;
grid-column: 1/4;
background: rgb(0, 0, 0);
box-shadow: 0px 0px 5px rgb(122, 244, 255);
border: 1px solid rgb(122, 244, 255);
border-radius: 5px;
padding-left: 10px;
}
.wrapper{
display: grid;
width: 325px;
grid-template-columns: repeat(3, auto, auto);
grid-template-rows: repeat(1, 1fr);
gap: 6px;
background: #000000;
padding: 5px;
border-radius: 10px;
box-shadow: 0px 0px 5px rgb(122, 244, 255);
border: 1.5px solid rgb(122, 244, 255);
margin: 2.5px;
color: white;
overflow:hidden;
}
.main-content{
color: black;
background-color: rgb(10, 10, 10);
min-height: 500px;
overflow: hidden;
}
.megawrap{
display: grid;
padding:0px;
align-items: center;
justify-content: center;
grid-template-columns: 50% 50%;
width: 95%;
min-height: 300px;
row-gap: 20px;
column-gap: 10px;
padding-top:100px;
margin: 0 auto;
margin-left: 35px;
}
.date-type {
position: absolute;
left: 379px;
top:275px;
max-width: 94px;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>III</title>
<link rel="stylesheet" href="main.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Dosis:wght@200;300;400;500;600;700;800&family=Roboto Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300;1,400;1,500;1,600;1,700&family=Rock 3D&display=swap" rel="stylesheet">
</head>
<body>
<nav>
<div class="container">
<div class="logobutton">
<img class="smallu" src="images/ulogo-white.jpg">
<a class="homenugget" href="home.html"></a>
</div>
<div class="menu">
<a href="about.html">About</a>
<a href="events.html" class="is-active">Events</a>
<a href="login.html">Login</a>
<a href="#">Dashboard</a>
</div>
<div class="dropdown">
<button class="hamburger">
<span> </span>
<span></span>
<span></span>
</button>
<div class="dropdownMenu">
<a href="events.html" class="link">Events</a>
<a href="about.html" class="link">About</a>
<a href="#" class="link">Login</a>
<a href="#" class="link">Dashboard</a>
</div>
</div>
</div>
</nav>
<div class="main-content">
<div class="megawrap">
<div class="wrapper">
<div class="box1">Title</div>
<img class="box2" src="images/7.jpg" alt="">
<div class= "box3">
box3 box 3 box3 box 3box3 box 3 box3 box 3 box3 box 3 box3 box 3
</div>
<div class= "box4">
box4 box4 box4 box4box4box4box 4box4box4box 4box4 box box box box box box box box box box
</div>
</div>
<div class="wrapper">
<div class="box1">Title</div>
<img class="box2" src="images/7.jpg" alt="">
<div class= "box3">
box3 box 3 box3 box 3box3 box 3 box3 box 3 box3 box 3 box3 box 3
</div>
<div class= "box4">
box4 box4 box4 box4box4box4box 4box4box4box 4box4 box box box box box box box box box box
</div>
</div>
<div class="wrapper">
<div class="box1">Title</div>
<img class="box2" src="images/7.jpg" alt="">
<div class= "box3">
box3 box 3 box3 box 3box3 box 3 box3 box 3 box3 box 3 box3 box 3
</div>
<div class= "box4">
box4 box4 box4 box4box4box4box 4box4box4box 4box4 box box box box box box box box box box and what if box 4 is too long omg what we gunna doooo and what if box 4 is too long omg what we gunna doooo and what if box 4 is too long omg what we gunna doooo and what if box 4 is too long omg what we gunna doooo and what if box 4 is too long omg what we gunna doooo and what if box 4 is too long omg what we gunna doooo
</div>
</div>
<div class="wrapper">
<div class="box1">Title</div>
<img class="box2" src="images/7.jpg" alt="">
<div class= "box3">
box3 box 3 box3 box 3box3 box 3 box3 box 3 box3 box 3 box3 box 3
</div>
<div class= "box4">
box4 box4 box4 box4box4box4box 4box4box4box 4box4 box box box box box box box box box box
</div>
</div>
<div class="wrapper">
<div class="box1">Title is too long for the text</div>
<img class="box2" src="images/7.jpg" alt="">
<div class= "box3">
box3 box 3 box3 box 3box3 box 3 box3 box 3 box3 box 3 box3 box 3
</div>
<div class= "box4">
box4 box4 box4 box4box4box4box 4box4box4box 4box4 box box box box box box box box box box
</div>
</div>
</div>
</div>
<!-- Footer section -->
<footer class="footer">
<div class="footer-container">
<div class="footer-row">
<div class="Footer-text-left">
<p>Copyright ? 2022 Ideas Imprint Inc. All Rights Reserved.</p>
<p> Made with <span class="hearted"> ?</span></p>
</div>
</div>
</div>
<!-- footer top -->
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="main.js"></script>
</body>
</html>uj5u.com熱心網友回復：
該overflow屬性不被子元素繼承，因此文本所在的元素沒有overflow: hidden. 如果你想要它，你必須將它添加到你的各種.boxN類中：
顯示代碼片段
.box1 {
font-size: 37px;
font-weight: 900;
padding-top: 5px;
padding-bottom: 5px;
align-items: center;
width: 323px;
max-height: 106px;
border-radius: 5px;
min-height: 50px;
grid-column: 1/4;
text-align: center;
color: black;
background: black;
box-shadow: 0px 0px 5px rgb(122, 244, 255);
border: 1px solid rgb(122, 244, 255);
color: white;
overflow: hidden;
}
.box2 {
grid-column: 1 / 2;
width: 220px;
height: 247px;
border-radius: 4px;
box-shadow: 0px 0px 5px rgb(122, 244, 255);
border: 1px solid rgb(122, 244, 255);
color: blanchedalmond;
overflow: hidden;
}
.box3 {
font-size: 28px;
width: 86px;
max-height: 247px;
word-wrap: break-word;
grid-column: 2/3 ;
color: rgba(0, 0, 0, 0.397);
background: black;
box-shadow: 0px 0px 5px rgb(122, 244, 255);
border: 1px solid rgb(122, 244, 255);
border-radius: 5px;
color: white;
padding-left: 10px;
overflow: hidden;
}
.box4 {
font-size: 28px;
width: 314px;
max-height: 108px;
word-wrap: break-word;
grid-column: 1/4;
background: rgb(0, 0, 0);
box-shadow: 0px 0px 5px rgb(122, 244, 255);
border: 1px solid rgb(122, 244, 255);
border-radius: 5px;
padding-left: 10px;
overflow: hidden;
}
.wrapper{
display: grid;
width: 325px;
grid-template-columns: repeat(3, auto, auto);
grid-template-rows: repeat(1, 1fr);
gap: 6px;
background: #000000;
padding: 5px;
border-radius: 10px;
box-shadow: 0px 0px 5px rgb(122, 244, 255);
border: 1.5px solid rgb(122, 244, 255);
margin: 2.5px;
color: white;
overflow:hidden;
}
.main-content{
color: black;
background-color: rgb(10, 10, 10);
min-height: 500px;
overflow: hidden;
}
.megawrap{
display: grid;
padding:0px;
align-items: center;
justify-content: center;
grid-template-columns: 50% 50%;
width: 95%;
min-height: 300px;
row-gap: 20px;
column-gap: 10px;
padding-top:100px;
margin: 0 auto;
margin-left: 35px;
}
.date-type {
position: absolute;
left: 379px;
top:275px;
max-width: 94px;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>III</title>
<link rel="stylesheet" href="main.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Dosis:wght@200;300;400;500;600;700;800&family=Roboto Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300;1,400;1,500;1,600;1,700&family=Rock 3D&display=swap" rel="stylesheet">
</head>
<body>
<nav>
<div class="container">
<div class="logobutton">
<img class="smallu" src="images/ulogo-white.jpg">
<a class="homenugget" href="home.html"></a>
</div>
<div class="menu">
<a href="about.html">About</a>
<a href="events.html" class="is-active">Events</a>
<a href="login.html">Login</a>
<a href="#">Dashboard</a>
</div>
<div class="dropdown">
<button class="hamburger">
<span> </span>
<span></span>
<span></span>
</button>
<div class="dropdownMenu">
<a href="events.html" class="link">Events</a>
<a href="about.html" class="link">About</a>
<a href="#" class="link">Login</a>
<a href="#" class="link">Dashboard</a>
</div>
</div>
</div>
</nav>
<div class="main-content">
<div class="megawrap">
<div class="wrapper">
<div class="box1">Title</div>
<img class="box2" src="images/7.jpg" alt="">
<div class= "box3">
box3 box 3 box3 box 3box3 box 3 box3 box 3 box3 box 3 box3 box 3
</div>
<div class= "box4">
box4 box4 box4 box4box4box4box 4box4box4box 4box4 box box box box box box box box box box
</div>
</div>
<div class="wrapper">
<div class="box1">Title</div>
<img class="box2" src="images/7.jpg" alt="">
<div class= "box3">
box3 box 3 box3 box 3box3 box 3 box3 box 3 box3 box 3 box3 box 3
</div>
<div class= "box4">
box4 box4 box4 box4box4box4box 4box4box4box 4box4 box box box box box box box box box box
</div>
</div>
<div class="wrapper">
<div class="box1">Title</div>
<img class="box2" src="images/7.jpg" alt="">
<div class= "box3">
box3 box 3 box3 box 3box3 box 3 box3 box 3 box3 box 3 box3 box 3
</div>
<div class= "box4">
box4 box4 box4 box4box4box4box 4box4box4box 4box4 box box box box box box box box box box and what if box 4 is too long omg what we gunna doooo and what if box 4 is too long omg what we gunna doooo and what if box 4 is too long omg what we gunna doooo and what if box 4 is too long omg what we gunna doooo and what if box 4 is too long omg what we gunna doooo and what if box 4 is too long omg what we gunna doooo
</div>
</div>
<div class="wrapper">
<div class="box1">Title</div>
<img class="box2" src="images/7.jpg" alt="">
<div class= "box3">
box3 box 3 box3 box 3box3 box 3 box3 box 3 box3 box 3 box3 box 3
</div>
<div class= "box4">
box4 box4 box4 box4box4box4box 4box4box4box 4box4 box box box box box box box box box box
</div>
</div>
<div class="wrapper">
<div class="box1">Title is too long for the text</div>
<img class="box2" src="images/7.jpg" alt="">
<div class= "box3">
box3 box 3 box3 box 3box3 box 3 box3 box 3 box3 box 3 box3 box 3
</div>
<div class= "box4">
box4 box4 box4 box4box4box4box 4box4box4box 4box4 box box box box box box box box box box
</div>
</div>
</div>
</div>
<!-- Footer section -->
<footer class="footer">
<div class="footer-container">
<div class="footer-row">
<div class="Footer-text-left">
<p>Copyright ? 2022 Ideas Imprint Inc. All Rights Reserved (other than the CC-BY-SA granted to SE Inc. by posting on Stack Overflow).</p>
<p> Made with <span class="hearted"> ?</span></p>
</div>
</div>
</div>
<!-- footer top -->
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="main.js"></script>
</body>
</html>uj5u.com熱心網友回復：
考慮放入overflow: hiddendiv。
.box3 {
font-size: 28px;
width: 86px;
max-height: 247px;
word-wrap: break-word;
grid-column: 2/3 ;
color: rgba(0, 0, 0, 0.397);
background: black;
box-shadow: 0px 0px 5px rgb(122, 244, 255);
border: 1px solid rgb(122, 244, 255);
border-radius: 5px;
color: white;
padding-left: 10px;
overflow: hidden; /* Add this */
}
.box4 {
font-size: 28px;
width: 314px;
max-height: 108px;
word-wrap: break-word;
grid-column: 1/4;
background: rgb(0, 0, 0);
box-shadow: 0px 0px 5px rgb(122, 244, 255);
border: 1px solid rgb(122, 244, 255);
border-radius: 5px;
padding-left: 10px;
overflow: hidden; /* Add this */
}
這是固定版本：
.box1 {
font-size: 37px;
font-weight: 900;
padding-top: 5px;
padding-bottom: 5px;
align-items: center;
width: 323px;
max-height: 106px;
border-radius: 5px;
min-height: 50px;
grid-column: 1/4;
text-align: center;
color: black;
background: black;
box-shadow: 0px 0px 5px rgb(122, 244, 255);
border: 1px solid rgb(122, 244, 255);
color: white;
}
.box2 {
grid-column: 1 / 2;
width: 220px;
height: 247px;
border-radius: 4px;
box-shadow: 0px 0px 5px rgb(122, 244, 255);
border: 1px solid rgb(122, 244, 255);
color: blanchedalmond;
}
.box3 {
font-size: 28px;
width: 86px;
max-height: 247px;
word-wrap: break-word;
grid-column: 2/3 ;
color: rgba(0, 0, 0, 0.397);
background: black;
box-shadow: 0px 0px 5px rgb(122, 244, 255);
border: 1px solid rgb(122, 244, 255);
border-radius: 5px;
color: white;
padding-left: 10px;
overflow: hidden;
}
.box4 {
font-size: 28px;
width: 314px;
max-height: 108px;
word-wrap: break-word;
grid-column: 1/4;
background: rgb(0, 0, 0);
box-shadow: 0px 0px 5px rgb(122, 244, 255);
border: 1px solid rgb(122, 244, 255);
border-radius: 5px;
padding-left: 10px;
overflow: hidden;
}
.wrapper{
display: grid;
width: 325px;
grid-template-columns: repeat(3, auto, auto);
grid-template-rows: repeat(1, 1fr);
gap: 6px;
background: #000000;
padding: 5px;
border-radius: 10px;
box-shadow: 0px 0px 5px rgb(122, 244, 255);
border: 1.5px solid rgb(122, 244, 255);
margin: 2.5px;
color: white;
overflow:hidden;
}
.main-content{
color: black;
background-color: rgb(10, 10, 10);
min-height: 500px;
overflow: hidden;
}
.megawrap{
display: grid;
padding:0px;
align-items: center;
justify-content: center;
grid-template-columns: 50% 50%;
width: 95%;
min-height: 300px;
row-gap: 20px;
column-gap: 10px;
padding-top:100px;
margin: 0 auto;
margin-left: 35px;
}
.date-type {
position: absolute;
left: 379px;
top:275px;
max-width: 94px;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>III</title>
<link rel="stylesheet" href="main.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Dosis:wght@200;300;400;500;600;700;800&family=Roboto Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300;1,400;1,500;1,600;1,700&family=Rock 3D&display=swap" rel="stylesheet">
</head>
<body>
<nav>
<div class="container">
<div class="logobutton">
<img class="smallu" src="images/ulogo-white.jpg">
<a class="homenugget" href="home.html"></a>
</div>
<div class="menu">
<a href="about.html">About</a>
<a href="events.html" class="is-active">Events</a>
<a href="login.html">Login</a>
<a href="#">Dashboard</a>
</div>
<div class="dropdown">
<button class="hamburger">
<span> </span>
<span></span>
<span></span>
</button>
<div class="dropdownMenu">
<a href="events.html" class="link">Events</a>
<a href="about.html" class="link">About</a>
<a href="#" class="link">Login</a>
<a href="#" class="link">Dashboard</a>
</div>
</div>
</div>
</nav>
<div class="main-content">
<div class="megawrap">
<div class="wrapper">
<div class="box1">Title</div>
<img class="box2" src="images/7.jpg" alt="">
<div class= "box3">
box3 box 3 box3 box 3box3 box 3 box3 box 3 box3 box 3 box3 box 3
</div>
<div class= "box4">
box4 box4 box4 box4box4box4box 4box4box4box 4box4 box box box box box box box box box box
</div>
</div>
<div class="wrapper">
<div class="box1">Title</div>
<img class="box2" src="images/7.jpg" alt="">
<div class= "box3">
box3 box 3 box3 box 3box3 box 3 box3 box 3 box3 box 3 box3 box 3
</div>
<div class= "box4">
box4 box4 box4 box4box4box4box 4box4box4box 4box4 box box box box box box box box box box
</div>
</div>
<div class="wrapper">
<div class="box1">Title</div>
<img class="box2" src="images/7.jpg" alt="">
<div class= "box3">
box3 box 3 box3 box 3box3 box 3 box3 box 3 box3 box 3 box3 box 3
</div>
<div class= "box4">
box4 box4 box4 box4box4box4box 4box4box4box 4box4 box box box box box box box box box box and what if box 4 is too long omg what we gunna doooo and what if box 4 is too long omg what we gunna doooo and what if box 4 is too long omg what we gunna doooo and what if box 4 is too long omg what we gunna doooo and what if box 4 is too long omg what we gunna doooo and what if box 4 is too long omg what we gunna doooo
</div>
</div>
<div class="wrapper">
<div class="box1">Title</div>
<img class="box2" src="images/7.jpg" alt="">
<div class= "box3">
box3 box 3 box3 box 3box3 box 3 box3 box 3 box3 box 3 box3 box 3
</div>
<div class= "box4">
box4 box4 box4 box4box4box4box 4box4box4box 4box4 box box box box box box box box box box
</div>
</div>
<div class="wrapper">
<div class="box1">Title is too long for the text</div>
<img class="box2" src="images/7.jpg" alt="">
<div class= "box3">
box3 box 3 box3 box 3box3 box 3 box3 box 3 box3 box 3 box3 box 3
</div>
<div class= "box4">
box4 box4 box4 box4box4box4box 4box4box4box 4box4 box box box box box box box box box box
</div>
</div>
</div>
</div>
<!-- Footer section -->
<footer class="footer">
<div class="footer-container">
<div class="footer-row">
<div class="Footer-text-left">
<p>Copyright ? 2022 Ideas Imprint Inc. All Rights Reserved.</p>
<p> Made with <span class="hearted"> ?</span></p>
</div>
</div>
</div>
<!-- footer top -->
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="main.js"></script>
</body>
</html>uj5u.com熱心網友回復：
該overflow:hidden樣式僅添加到包裝器 div 而不是它的子元素，即#box-N
他們不會繼承溢位樣式，因此您需要添加一個.box類或overflow:hidden向所有 div 添加樣式
uj5u.com熱心網友回復：
.box4{
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
https://www.youtube.com/watch?v=bHn0WHqNnj4 轟隆隆。多虧了這個視頻，我才知道。
無論如何，謝謝，我會為努力的評論點贊。
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/418661.html
標籤：
上一篇：在反應中從狀態填充選擇元素