[2024.05.24] JS_영역 초과한 텍스트를 생략 부호로 (...) 처리

개인 과제 중 아래와 같이 글이 길이가 설정한 범위의 영역보다 길어질 경우 나머지 부분을 ... 처리하는 과정에서 튜터님의 도움을 받아 처음 보는 방법으로 해결하여 기록하려 한다.

... 처리

 

 

여러 방법을 시도해보았지만 제대로 작동하는 것이 없었고, 튜터님이 제안해 주신 방법만 적용되어 그 코드가 왜 작동되는지 한 번 알아보았다.

튜터님이 제안해주신 코드

위 스타일이 적용된 컴포넌트

 

※ overflow: hidden

→  가로/세로 영역에서 범위를 초과한 컨텐츠들을 보이지 않게 처리해 준다.

※  display: -webkit-box

→  웹킷 기반 브라우저에서 요소를 블록 컨테이너인 flexbox로 설정한다.

※   -webkit-line-clamp: 1

→ 줄 수를 1줄로 제한하며, 텍스트가 한 줄을 넘기면 잘라낸다.

※  -webkit-box-orient: vertical

→ flexbox의 방향을 수직으로 설정한다

box-orient 속성

 

※   text-overflow: ellipsis

→ 영역을 초과한 넘친 텍스트 부분을 생략 부호(...)로 표시한다.

 

 

이 방법은 웹킷 기반 브라우저(크롬, 사파리 등)에서 작동하여 현재 사용되고 있는 대부분의 브라우저에서 작동하나, IE에서는 지원하지 않는다. 때문에 추후 실제 프로젝트에 적용할 경우 IE에도 대응할 수 있는 다른 방법도 추가로 적용하면 좋을 것 같다.

 

---

+ 5월 27일 추가

새로운 과제를 하면서 튜터님께 여쭤보게 되어 또 새로운  방법을 알게 되었다!

 

새로운 방법 white-space

지난번에도 이와 같은 코드로 작성해 본 적 있는데 전혀 바뀌지 않아서 왜 그런가 한참 고민했던 적이 있었다. 그런데 알고 보니 이걸 쓰려면 명시적으로 넓이를 지정해주어야 한다는 걸 듣고, '그러니 지난번에 한참 고쳐도 안 됐지...'라고 시간낭비한 지난 시간이 아깝게 느껴졌다..ㅠㅠ white-space: nowrap은 텍스트가 길어서 부모 요소 안의 가로폭을 넘어가더라도 자동으로 줄바꿈이 일어나지 않게 해 줄 수 있는 속성이다. 이걸로 문장 전체를 한 줄로 만들고, overflow로 보이지 않는 부분은 잘라낸 다음, text-overflow: ellipsis로 (...) 처리하면 완성!