[CSS] 타이틀 레이아웃 변경 : text-overflow, word-break

 

일부만 보이는 레이아웃 문제 해결, 전체 제목을 시각적으로 표시하여 사용자 경험 향상.

제목 '...'으로 잘리는 현상 CSS로 전체 제목 보이게 하는 방법

현재 사용 중인 스킨은 077 반응형 사이드 포토프레임이며 만족스럽게 잘 사용하고 있습니다.

그러나 몇 가지 스타일적인 수정을 통해 더 나은 사용자 경험을 만들고자 했습니다.

 

 

1. 문제 정의:

 

현재 사용 중인 블로그 스킨인 077 반응형 사이드 포토프레임에서, 포스트 제목이 잘려 나와 전체 제목이 보이지 않는 레이아웃의 불편함이 있었습니다. 이를 개선하여 사용자 경험을 향상하고자 했습니다.

 

• 포스트 제목이 잘리는 문제 ('...'으로 표시되는 부분)를 해결하고, 전체 제목이 나오도록 반응형으로 변경하고자 했다.
• CSS 코드에서 포스트 제목이 잘려 나오는 원인: text-overflow와 overflow 속성을 수정하여 해결하고자 했다.

 

 

2. 원본 CSS 코드 분석:

 

 

기존 CSS 코드에서는 포스트 제목이 잘려 나오는 원인으로 text-overflow 속성과 overflow:hidden 속성이 적용되어 있었습니다. 특히, text-overflow: ellipsis;는 텍스트를 줄이고 "..."으로 표시하는 기능이 있으며, overflow: hidden;은 컨테이너를 벗어나는 내용을 숨기는 역할을 하였습니다. 또한, -webkit-line-clamp: 1;는 웹킷 브라우저에서 특정 라인 수까지만 표시하는 속성이었습니다.

 

 

CSS 코드 설명

text-overflow: ellipsis;	텍스트가 부모 요소를 넘어갈 경우, 텍스트를 줄이고 "..."으로 표시하는 속성.
overflow: hidden;	컨테이너를 벗어나는 내용을 숨기는 속성. 부모 요소에 넘치는 자식 요소를 감출 때 사용.
webkit-line-clamp: 1;	웹킷 브라우저에서만 동작하는 속성으로, 특정 라인 수까지만 표시하며 나머지는 생략. 주로 다중 라인 텍스트의 길이를 제한할 때 사용.

 

 

 

 

3. 해결과정: text-overflow 제거 및 word-break: keep-all 추가

 

• text-overflow: ellipsis;와 overflow: hidden;를 대체하기 위해 word-break: keep-all; 속성을 도입하였습니다. 이로써 텍스트는 단어 사이에서만 줄 바꿈을 허용하게 되어 전체 제목이 나오도록 보이게 되었습니다.
• 글씨가 겹치는 문제를 해결하기 위해 타이틀의 padding-bottom을 추가 했습니다.

CSS 코드 설명

word-break: keep-all;	단어 사이에서만 줄 바꿈을 허용하는 속성. 단어가 컨테이너를 넘어갈 때 전체 단어를 다음 줄로 이동시킴.

변경 전	중간 과정	변경 후
1. 텍스트 오버플로우 문제 해결: - text-overflow: ellipsis;로 발생한 제목의 '...'으로 인한 잘림 문제 개선. 2. 텍스트 오버플로우 제거 및 레이아웃 최적화: - text-overflow 속성 제거하고 word-break: keep-all; 추가하여 가독성 향상.	제목과 내용 사이의 겹침 방지를 위해 padding-bottom 추가.	해당 코드 변경 후 제목 잘림 및 내용 겹침 문제 해결 및 레이아웃이 깔끔해짐

 

 

 

 

4. 최종 CSS 코드:

원본	최종 CSS 코드
.post-item .title {           display: block;           display:-webkit-box;            -webkit-line-clamp: 1;           text-overflow: ellipsis;           -webkit-box-orient:vertical;           overflow:hidden;           max-height: 1.4em;           font-size: 1.125em;           font-weight: bold;           color: #000;           line-height: 1.4;            margin-bottom: 10px; }	.post-item .title {           display: block;           display:-webkit-box;           word-break: keep-all;           max-height: 1.4em;           font-size: 1.125em;           font-weight: bold;           color: #000;           line-height: 1.4;           margin-bottom: 10px;           padding-bottom: 25px; }

 

변경 사항 및 설명:

1. text-overflow 속성 수정:
   • 변경 전: text-overflow: ellipsis;
   • 변경 후: word-break: keep-all;
   • 설명: text-overflow: ellipsis;는 텍스트가 컨테이너를 넘어갈 때 "..."로 표시되는데, 이를 해결하기 위해 word-break: keep-all;로 변경했습니다. 이 옵션은 단어 사이에서만 줄 바꿈을 허용하여 전체 제목이 나오도록 합니다.
2. overflow 속성 삭제 및 padding-bottom 추가:
   • 변경 전: overflow: hidden;
   • 변경 후: padding-bottom: 25px;
   • 설명: overflow: hidden;은 텍스트가 컨테이너를 벗어날 경우 숨기는 속성이었는데, 이를 제거하고 대신 padding-bottom: 25px;를 추가하여 텍스트가 하단에 여백을 갖도록 했습니다. 이를 통해 텍스트가 다른 요소와 겹치지 않도록 보다 깔끔한 디자인을 구현했습니다.
3. -webkit-line-clamp 속성 제거:
   • 변경 전: -webkit-line-clamp: 1;
   • 변경 후: 제거
   • 설명: -webkit-line-clamp는 특정 라인 수까지만 표시하는데, 이를 제거함으로써 원하는 만큼의 높이를 갖게 했습니다.

 

 

5. 결과:

 

해당 변경을 통해 포스트 제목이 더 자연스럽게 표현되고, 전체 내용이 잘 보이도록 개선되었습니다. 또한, 불필요한 코드를 제거함으로써 가독성이 향상되었습니다.

 

 

 

6. 참고 자료:

 

- devwoodie. [개발하자(DevHaja)]. (2022, June 23). [CSS] '...' 처리하는 방법 (text-overflow: ellipsis). Tistory. https://devwoodie.tistory.com/19

- 나의 시점. [ 행복하기 ]. (2010, April 29). [CSS] 텍스트 줄바꿈 처리 word-break, white-space. Tistory. https://htglss.tistory.com/31

- Gyu. [TechGyu]. (2016 September 14). [CSS] 여백관련속성 (margin, padding, border). Naver Blog. https://m.blog.naver.com/bgpoilkj/220812247716

- 어쩌다개발. [알쓸개잡]. (2019 January 30). 테이블에서 글자수 많으면 ... 으로 표시하는 방법. Tistory.

https://devmango.tistory.com/29