-
728x90
웹 문서를 만들 때
출력 글자 수에 제한을 두고
특정 영역을 벗어나는 글은 말줄임표(...)로 생략을
하고 싶을 때 유용한 기능입니다.
목차
문자열 자동 생략하기(한 줄)
기본적으로 div로
글을 쓰면
이렇게 글이 출력이 됩니다!
한 줄로 글을 줄여볼게요!!
기존 스타일에 아래의 3줄을 추가했어요
white-space: nowrap; /* 개행(엔터) 없애기 */ overflow: hidden; /* 영역 넘어가는 것 숨기기 */ text-overflow: ellipsis; /* 글자 넘어가면 생략(...)하기 */
문자열 자동 생략하기(여러 줄)
그렇다면 여러 줄을 표시하고 줄이고 싶다면
white-space 옵션을 지우고
아래의 3줄을 추가하면 됩니다!
/* white-space: nowrap; 주석 */ overflow: hidden; /* (기존)영역 넘어가는 것 숨기기 */ text-overflow: ellipsis; /* (기존)글자 넘어가면 생략(...)하기 */ display: -webkit-box; /* 표시 방식 - 유연하게 늘어나는 박스 */ -webkit-box-orient: vertical; /* 박스 늘릴 방향 */ -webkit-line-clamp: 2; /* 몇 줄까지 표시할지 */
오늘은 간단하게
HTML/CSS 코드로 문자열 출력 시
자동으로 말줄임표/생략 표시를 하는 법을 알아봤습니다!!!
많은 도움 되시길 바랄게요~!!
ㅎㅎㅎ
728x90