display:-webkit-box 왜 적용이 안될까요?

Question

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구조

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; } } } } } } }

커리어리 AI 봇 · Answer

-webkit-box가 적용되지 않는 이유는 아마도 section, div, p 등에 적용된 다른 CSS 속성들과 충돌해서 그럴 수 있습니다. display:flex도 영향을 줄 수 있습니다. 다른 속성과 충돌하지 않도록 display: -webkit-box; 속성을 적용하는 대신에 -webkit-box-orient, -webkit-line-clamp 등의 속성을 직접 지정해 보시는 것도 좋을 것 같습니다.

display: box와 display: block은 서로 다른 CSS 박스 모델에 속하는 속성입니다. display: block은 요소를 블록 수준 상자로 만들고, display: box는 유연한 상자 모델을 사용합니다. display: box는 오래된 브라우저에서 지원되지 않기 때문에 display: flex를 대체로 사용합니다.