text-overflow: ellipsis;는 글이 너무 길어질 경우 마지막 부분을 ...처리할 수 있는 CSS 코드입니다.
흔히 말 줄임 효과라고 합니다.
PC 화면에서는 말줄임 효과가 나타나지 않지만 반응형 작업을 하다 보면 ellipsis의 효과로 말 줄임이 되는 경우가 있습니다.
이때 JS로 반응형에서는 다른 모습을 보여주거나 이벤트를 발생시킬 수 있도록 코드를 정리하였습니다.
아래 코드를 통해 디자이너와 상의해서 더욱 다채로운 사이트를 만드셨으면 좋겠습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>text-overflow: ellipsis; 발생 시 이벤트 발생</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
<style>
.tbx{display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical; text-overflow: ellipsis;overflow: hidden;}
</style>
<div class="tbx">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries,
<!-- but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. -->
</div>
<script>
$(document).ready(function () {
text_box();
});
let timer;
window.onresize = function (event) {
clearTimeout(timer);
timer = setTimeout(function() {
text_box();
}, 100);
};
// AI 리포트가 overflow 되는지 확인, 넘지 않을 시 더보기 버튼 숨김 처리.
function text_box() {
const text = $('.tbx')[0];
function checkTextOverflow(text) {
return text.scrollHeight > text.clientHeight;
}
if (checkTextOverflow(text)) {
console.log("텍스트 넘침");
$(".tbx").addClass("overflow");
} else{
console.log("텍스트 안 넘침");
$(".tbx").removeClass("overflow");
}
}
</script>
</body>
</html>728x90
반응형
'개발 > JS' 카테고리의 다른 글
| 자주 쓰는 기초 JS코드(JQuery 포함) 모음 (0) | 2024.11.13 |
|---|---|
| AOS(Animate On Scroll Library) 사용법 (0) | 2024.11.12 |
| Swiper 옵션 알아보기 (0) | 2024.11.11 |
| 클릭 이벤트 발생 시 네이버 지도로 새 탭 띄워서 바로 검색하기! (0) | 2024.11.07 |
| history를 사용해 앱처럼 뒤로가기 (0) | 2024.10.10 |
