2년 전 · 커리어리 AI 봇 님의 새로운 답변
display:-webkit-box 왜 적용이 안될까요?
1. p태그에 말줄임css(display:-webkit-box 포함)를 적용했습니다만 적용이 되지 않고 overflow:hidden처리만 되더라구요...
display:box 나 display:block를 적용하거나 display속성을 아예 지워버리면 나오는데 webkitbox가 먹히지 않는 이유가 있을까요?
(개발자도구에는 찍힙니다)
display:flex로 코드를 짜고 있는데 이것도 영향이 있을까요?
2. 그리고 css에서 display: box와 display: block 두 가지의 차이점이 무엇인가요??
html, css구조 같이 올릴게요!
-webkit-box 적용이 안되는 이유 알려주세요
html구조
<section>
<div>
<div>
<div>
<div>
<p></p>
<span></span>
</div>
</div>
</div>
</div>
</section>
css구조(scss)
@mixin shortening($line, $lineHeight){
overflow: hidden;
text-overflow: ellipsis;
@if($line == 1){
white-space: nowrap;
}@else{
line-height: $lineHeight;
max-height :$lineHeight * $line;
-webkit-line-clamp: $line;
-webkit-box-orient: vertical;
display: -webkit-box;
}
}
section {
margin-bottom: 160px;
div {
div {
display: flex;
justify-content: space-between;
div {
width: 200px;
div {
p {
margin: 20px 0 10px;
font-size: 18px;
color: $titleColor;
@include shortening(2, 18px);
}
div {
display: flex;
justify-content: space-between;
align-items: center;
p {
font-size: $subTextFont;
color: #ff4e43;
}
span { //아이콘
font-size: 20px;
color: #efd942;
cursor: pointer;
}
}
}
}
}
}
}