Outline
최근 grid 레이아웃을 작성하면서 하나의 Cell이 차지하는 가로길이를 1fr로 지정하는 경우 해당 열에서 가장 긴 텍스트의 영향을 받았다. 그 때문에 원하던 레이아웃이 틀어지게 되었고 한 줄씩 minmax를 주어가며 조정을 하고 있는중 텍스트 길이 조정의 필요성을 인지하게 되었다.
Text Ellipsis
인스타나 다른 SNS와 같이 길어진 댓글은 ... 과 같이 끝나며 뒤의 내용이 감추어진다. 이 때 까지만 해도 자바스크립트로 string.length로 조건을 주어서 처리하는 줄 알았으나 css로만 적용할 수 있는 속성이 있었다.
.text-ellipsis {
width: ,
overflow: hidden;
text-overflow: ellipsis;
white-space: no-wrap;
}
1) text-overflow: ellipsis는 block레벨 요소에서만 적용이 되므로 span, strong 등의 경우 체크!
2) width를 주는 이유는 해당 width 이후의 텍스트를 overflow: hidden처리 하기 위함 (어디 까지 보여줄지를 결정)
3) text-overflow: ellipsis로 ... 표시
4) white-space: no-wrap으로 공백문자 있어도 1줄로 표시할 수 있게 된다.
작동하지 않을 때, 체크리스트!!
1) 마찬가지로 display: inline-block임을 체크한다. 일반 block도 가능하지만 span같이 inline 태그의 경우 block으로 바꾸어 레이아웃이 무너지는 것보다는 나은 상황이다.
2) width가 있는지도 체크해야 한다. 이때, 단위가 %라면 작동하지 않는 경우도 있는듯하다. px, rem, em 또는 %를 쓴다면 calc( %) 와 같은 형식으로 작성하도록 한다!!
Reference
while( life ) { learn more; }