2021.04.07

말줄임을 설정할 때 display: -webkit-box에 대해 궁금했다.

이 속성은 블록에 float대신 사용할 수 있으며 블록을 수직, 수평으로 배치하거나 역순으로 배열하거나 임의의 순서로 배치할 수 있다.

말줄임표 오른쪽, 왼쪽에 아이콘을 넣는다고 가정하면 padding-left, padding-right를 뺀 나머지 너비에 말줄임텍스트가 배치된다.

조건.

1. 말줄임표가 한줄로 필요하며 양쪽 사이드에 아이콘이 있다.
2. 이 때 아이콘 두개는 absolute나 float 으로 처리한다.
3. 말줄임의 양 사이드에 padding 값을 준다.

display: -webkit-box를 사용하여 padding을 포함하지 않는 넓이를 준다.

white-space: nowrap은 한 줄로 표시되며 말줄임(...)이 생성되지 않는다. (잘 보고 판단해서 넣기)

주의할 점은 width나 height 값을 부모나 본인한테 지정해주어야 한다.

IE 버전은 -webkit-box도 안되고 말줄임도 스타일 지정을 따로 해야 된다.. 아래 사이트는 각 버전에 맞게 말줄임을 나타내었다.

말줄임 표시하기(text-overflow: ellipsis)

가장 중요한 부분!!!!!!!

만약 icon-01, icon-02가 각각 하나씩 삭제하면 .text의 padding은 각각 0 이 되도록 한다.

 

 

Reference

display: box

말줄임 처리

말줄임 표시하기(text-overflow: ellipsis)