텍스트 말줄임(...) 처리 – text-overflow: ellipsis
1. 문제
긴 텍스트가 한 줄에 다 안 들어가면 박스를 넘쳐서 UI가 깨지거나 어색해 보임
2. 해결 방법
.example {
width: 200px; /* 박스 너비 지정 필수 */
white-space: nowrap; /* 줄바꿈 없이 한 줄로 */
overflow: hidden; /* 넘친 텍스트 숨김 */
text-overflow: ellipsis; /* ... 처리 */
}
3. 설명
- white-space: nowrap → 줄바꿈 없이 한 줄 유지
- overflow: hidden → 넘치는 내용은 안 보이게
- text-overflow: ellipsis → 잘린 부분을 ...으로 표시
4. 팁
- div, span, a 등 텍스트 박스 어디든 적용 가능
- 반응형에서는 max-width 사용도 고려
5. 예시 적용
<div class="example">이 텍스트는 너무 길어서 잘릴 수도 있습니다.</div>
이 속성 조합은 관리자 페이지, 쇼핑몰 목록, 게시판 제목 등에서 매우 자주 쓰입니다.
긴 텍스트가 한 줄에 다 안 들어가면 박스를 넘쳐서 UI가 깨지거나 어색해 보임
2. 해결 방법
.example {
width: 200px; /* 박스 너비 지정 필수 */
white-space: nowrap; /* 줄바꿈 없이 한 줄로 */
overflow: hidden; /* 넘친 텍스트 숨김 */
text-overflow: ellipsis; /* ... 처리 */
}
3. 설명
- white-space: nowrap → 줄바꿈 없이 한 줄 유지
- overflow: hidden → 넘치는 내용은 안 보이게
- text-overflow: ellipsis → 잘린 부분을 ...으로 표시
4. 팁
- div, span, a 등 텍스트 박스 어디든 적용 가능
- 반응형에서는 max-width 사용도 고려
5. 예시 적용
<div class="example">이 텍스트는 너무 길어서 잘릴 수도 있습니다.</div>
이 속성 조합은 관리자 페이지, 쇼핑몰 목록, 게시판 제목 등에서 매우 자주 쓰입니다.
게시판 목록
퍼블리싱강좌
| 번호 | 분류 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|---|
| 178 | AngularJS | 8년 전 | 1434 | ||
| 177 | AngularJS | 8년 전 | 1206 | ||
| 176 | AngularJS | 8년 전 | 1275 | ||
| 175 | AngularJS | 8년 전 | 1371 | ||
| 174 | AngularJS | 8년 전 | 1142 | ||
| 173 | AngularJS | 8년 전 | 1885 | ||
| 172 | AngularJS | 8년 전 | 1440 | ||
| 171 | AngularJS | 8년 전 | 1131 | ||
| 170 | AngularJS | 8년 전 | 1395 | ||
| 169 | AngularJS | 8년 전 | 1191 | ||
| 168 | AngularJS | 8년 전 | 1005 | ||
| 167 | AngularJS | 8년 전 | 1970 | ||
| 166 | AngularJS | 8년 전 | 1042 | ||
| 165 | AngularJS | 8년 전 | 1109 | ||
| 164 | AngularJS | 8년 전 | 1311 | ||
| 163 | AngularJS | 8년 전 | 1157 | ||
| 162 | AngularJS | 8년 전 | 1371 | ||
| 161 | AngularJS | 8년 전 | 1378 | ||
| 160 | AngularJS | 8년 전 | 1132 | ||
| 159 | AngularJS | 8년 전 | 1096 | ||
| 158 | AngularJS | 8년 전 | 1513 | ||
| 157 | AngularJS | 8년 전 | 1481 | ||
| 156 | AngularJS | 8년 전 | 1327 | ||
| 155 | AngularJS | 8년 전 | 1215 | ||
| 154 | AngularJS | 8년 전 | 1621 | ||
| 153 | AngularJS | 8년 전 | 1111 | ||
| 152 | AngularJS | 8년 전 | 1533 | ||
| 151 | AngularJS | 8년 전 | 1425 | ||
| 150 | AngularJS | 8년 전 | 1123 | ||
| 149 | AngularJS | 8년 전 | 1647 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기