📖
PHP CSS 말줄임 처리 (멀티바이트 한글 포함)

페이지 정보

본문

✅ PHP 말줄임 처리 (멀티바이트 한글 포함)[code]<?php
$subject = $list[$i]['subject'];
$subject = mb_strlen($subject, 'UTF-8') > 30 ? mb_substr($subject, 0, 30, 'UTF-8') . '...' : $subject;
?>[/code]
💡 설명:
mb_strlen() : 문자열 길이 확인 (한글 포함 정확하게 계산)
mb_substr() : 문자열 자르기 (한글 깨지지 않음)
UTF-8 : 인코딩 설정 (한글 등 멀티바이트 문자 대응)

✅ 출력 예시[code]<?= $subject ?>[/code]또는 한 줄로 간단히[code]<?= mb_strlen($list[$i]['subject'], 'UTF-8') > 30
    ? mb_substr($list[$i]['subject'], 0, 30, 'UTF-8') . '...'
    : $list[$i]['subject'] ?>[/code]
🚀 HTML 태그 제거하고 자르기
HTML이 섞여 있다면 이렇게 처리하세요[code]$text = strip_tags($list[$i]['subject']); // 태그 제거
$text = mb_strlen($text, 'UTF-8') > 30 ? mb_substr($text, 0, 30, 'UTF-8') . '...' : $text;[/code]

✅ 2줄 말줄임 CSS (최신 방식, 대부분 브라우저 지원)[code].ellipsis-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;    /* 보여줄 줄 수 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}[/code]
✅ HTML 예시[code]<div class="ellipsis-2">
  이 텍스트는 두 줄까지만 표시되고, 그 이상은 말줄임표(...)로 처리됩니다. 유튜브 제목이 길 경우 이런 식으로 줄여서 표시할 수 있어요.
</div>[/code]
🎯 주의사항
이 방식은 block 요소에만 작동합니다.
width가 설정되어 있거나, 부모 요소가 일정 너비 이상일 때 잘 작동해요.

✅ 줄 수만 바꾸면 다양하게 응용 가능[code]-webkit-line-clamp: 1; /* 한 줄 */
-webkit-line-clamp: 3; /* 세 줄 */[/code]

✅ 1줄 말줄임표 (ellipsis) CSS
한 줄 말줄임(...)은 훨씬 간단하게 CSS로 처리할 수 있어요[code].ellipsis-1 {
  white-space: nowrap;        /* 줄바꿈 방지 */
  overflow: hidden;            /* 넘친 부분 숨김 */
  text-overflow: ellipsis;    /* ... 처리 */
}[/code]
✅ HTML 예시[code]<div class="ellipsis-1">
  이 텍스트는 길어도 한 줄로만 표시되고 나머지는 말줄임표로 처리됩니다.
</div>[/code]
📌 적용 팁
width나 max-width가 설정되어 있어야 말줄임이 제대로 동작합니다.
예:[code].ellipsis-1 {
  max-width: 300px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}[/code]
✅ 함께 쓰면 좋은 스타일 예시[code].ellipsis-1 {
  font-size: 14px;
  color: #333;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}[/code]

댓글목록

등록된 댓글이 없습니다.


자료 목록
번호 제목 날짜
173
🫧
04-17
172
🫧
04-17
171
🫧
04-16
170
🫧
04-15
169
🫧
04-15
168
🫧
04-13
167
🫧
04-13
166
🫧
04-13
📖
🫧
04-13
164
🫧
04-13
163
🫧
04-10
162
🫧
04-10
161
🫧
04-09
160
🫧
04-09
159
🫧
04-08

🔍 검색

회사소개 개인정보처리방침 서비스이용약관
Copyright © rainbowgarden.shop All rights reserved.