flex 박스 안에 말줄임 처리
플렉스 박스 안에 말줄임 하는 방법입니다.
말줄임 처리되어야 하는 요소에
.class {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
속성을 적용합니다.
그리고 해당 말줄임 처리되어야 하는 요소의 부모 요소들 중에 display: flex가 적용되어있는 요소가 있을 겁니다.
그럼 해당 요소까지 전부
.class {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
를 주어야합니다.
display: flex를 사용할 때 min-width: 0 속성과 display: inline-block 속성도 잘 활용하자!
<li>
<div style="display:flex">
<div style="flex: 1 1 auto;min-width: 0;">
<p style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">왼쪽왼쪽왼쪽왼쪽왼쪽왼쪽왼쪽왼쪽왼쪽왼쪽</p>
</div>
<div style="flex: 0 0 auto;">오른쪽</div>
</div>
</li>