📖
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]
$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]
댓글목록
등록된 댓글이 없습니다.
![]() ![]() |