我在 chunk-pin 中包含了一些文本，并且文本的顶部溢出了。下面是我的 SCSS 样式表：
.chunk-page {
background-color: #EEEEEE;
width: 100vw;
display: flex;
align-items: center;
justify-content: center;
overflow: auto;
.top-bar {
width: 100vw;
h1 {
font-family: "Roboto Serif";
text-align: justify;
font-size: 20px;
font-weight: 500;
}
}
.chunk-board {
width: 90vw;
height: auto;
display: flex;
flex-direction: row;
justify-content: center;
.chunk-pin {
width: 30%;
margin: 20px;
border: 2px solid black;
padding: 15px;
font-family: "Roboto Serif";
text-align: justify;
font-size: 15px;
background-color: white;
}
}
}
根据其他用户在浏览现有问题时的建议，我已经设置了
overflow: auto;如果我正确理解你的问题，那么你希望避免文本溢出带有“chunk-pin”类的 i 标签。 这是我实现这一目标的代码示例。
“top-bar”和“chunk-board”类的宽度使“chunk-pin”内的文本溢出，因为使用了宽度。
.chunk-page {
background-color: #EEEEEE;
width: 100vw;
display: flex;
align-items: center;
justify-content: center;
overflow: auto;
.top-bar {
//width: 100vw; //commented out width here to make space for "chunk-pin" class.
h1 {
font-family: "Roboto Serif";
text-align: justify;
font-size: 20px;
font-weight: 500;
}
}
.chunk-board {
width: 90vw;
height: auto;
display: flex;
flex-direction: row;
justify-content: center;
.chunk-pin {
word-break: keep-all;
//width: 30%; //Commented out width here to make space for long text in "chunk-pin" class
margin: 20px;
border: 2px solid black;
padding: 15px;
font-family: "Roboto Serif";
text-align: justify;
font-size: 7px;
background-color: white;
}
}
}<html>
<head>
</head>
<body>
<div class="chunk-page">
<div class="top-bar">
<h1>Your Title Here</h1>
</div>
<div class="chunk-board">
<div class="chunk-pin">
Pin Content 1
</div>
<div class="chunk-pin">
Pin Content 2
</div>
<div class="chunk-pin">
Pin Content 3 Pin Content 3 Pin Content 3 Pin Content 3 Pin Content 3
</div>
</div>
</div>
</body>
</html>