如您在下面的屏幕快照中所见,溢出正在起作用,但是它一直到容器的末尾,看起来很糟糕。
有什么办法可以在某个时间点将其切断并使其尊重填充?这样文本才能在填充位置而不是容器边缘的地方结束?
我对此div的代码具体如下:
/*Blog Card Styling*/
#blogCardContainer {
display: grid;
grid-template-columns: 1fr 2fr;
margin-left: 10%;
}
.blogCard {
background-color: white;
margin-bottom: 2em;
grid-column: 2;
width: 75%;
text-align: center;
border: 1px solid black;
padding: 1em;
align-self: start;
padding: 20px;
min-height: 10em;
max-height: 10em;
overflow: hidden;
}
.trendingTab {
background-color: white;
float: right;
display: flex;
justify-content: center;
flex-wrap: wrap;
width: 80%;
align-self: start;
text-align: center;
margin-left: auto;
margin-right: auto;
padding: 1em;
}
/*Blog Card Stylnig End*/
<div id='blogPostSectionContainer'>
<div class='blogCard'>
<h1>First Post</h1>
<p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempo. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempo. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod orem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempo. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
orem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempo. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
</span></p>
</div>
</div>
最佳答案
不,您不能让溢流以这种方式尊重填充。为了达到这种效果,您应该使用一些边框和框阴影的变体。
最简单的解决方案是使边框透明,以及要使用的填充宽度,然后使用类似box-shadow的值:0 0 0 1px黑色;模仿屏幕截图中的1px边框。
总的来说,您似乎试图以博客卡的“摘录”样式截断文本。
结合上面的原始HTML,您开始使用的CSS,上面的border和box-shadow解决方案,这是一种更完整的方法,还为内容溢出添加了垂直省略号:
/*Blog Card Styling*/
#blogCardContainer {
display: grid;
grid-template-columns: 1fr 2fr;
margin-top: 2em;
}
/* mixin for blog card */
.blogCard {
background-color: white;
grid-column: 2;
width: 75%;
text-align: center;
border-top: 2em solid transparent;
border-bottom: 2em solid transparent;
padding: 0 2em;
align-self: start;
overflow: hidden;
box-shadow: 0 0 0 1px black;
max-height: 14.54em;
}
.blogCard p {
overflow: hidden;
position: relative;
line-height: 1.2em;
min-height: 7.2em;
max-height: 7.2em;
text-align: justify;
margin-right: -1em;
padding-right: 1em;
}
.blogCard p:before {
content: '...';
position: absolute;
right: 0;
bottom: 0;
}
.blogCard p:after {
content: '';
position: absolute;
right: 0;
width: 100%;
height: 100%;
margin-top: 0.2em;
background: white;
}
/*Blog Card Stylnig End*/
<div id='blogCardContainer'>
<div class='blogCard'>
<h1>First Post</h1>
<p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempo. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempo. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod orem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempo. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
orem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempo. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
</span></p>
</div>
</div>
卡混音在scss中,因此如果您想弄乱它,可以参考我为此编写的the codepen,以使其更适合您的设计。摘录和卡片的高度基于您为变量$ lineCount设置的许多行,而不是使用CSS中原始的10em高度。