[HTML/CSS] 글자수 넘어가면 말줄임표

▤ 목차

• 1. CSS로 구현
• 2. Javascript로 구현

1. CSS로 구현

1. css로 구현

<style>
.text_area {
	width:50px;
	overflow: hidden;
	text-overflow: ellipsis;
  	-webkit-line-clamp: 2;
  	-webkit-box-orient: vertical;
	/* white-space: nowrap; */ 

</style>

 

text-overflow을 사용하기 위한 조건
text-overflow 속성은 블록 형태인 경우에만 적용된다.
width 또는 height가 고정적이어야 한다.
overflow: hidden; 을 사용해 영역을 감춰야 한다.
아래줄로 내려가는 것을 막기 위해 white-space: nowrap 등이 필요하다.

text-overflow 적용을 하려면 가로넓이가 있어야 하기 때문에 width를 적용해 줬다.

한 줄일 때 말 줄이기를 하고 싶으면 white-space: nowrap이 적용이 되어야 한다.

아래는 nowrap 적용 시 표현되는 예시다.

해당 속성이 없으면 자동으로 글자가 다음줄로 넘어가기 때문에 이러한 상황을 방지해야 한다.

2줄 이상일 경우 white-space 속성은 필요없다.

• overflow: hidden; : 가로 50px이 넘으면 내용 안 보이기
• text-overflow: ellipsis; : 가로 50px이 넘으면 말줌임표(...) 표시
• -webkit-line-clamp: 2; : 영역 내의 컨텐츠의 최대 라인 수를 결정 (2줄까지는 나옴)
• -webkit-box-orient: vertical; : 영역 박스 내의 정렬 결정 (가로정렬)
• withe-space : nowrap : 자동으로 줄바꿈 시키지 않는다.

2. Javascript로 구현

1. js로 구현

 let length = 10; // 표시할 글자수 기준
    let str = '자바스크립트로말줄임표구현하기';
    if (str.length > length) {
        str = str.substr(0, length - 2) + '...';
    }

https://develop-obm.tistory.com/28

[javascript/snippet] 말줄임 처리하기

 

https://shape-coding.tistory.com/entry/CSS-%ED%85%8D%EC%8A%A4%ED%8A%B8-ellipsis-%EB%A7%90%EC%A4%84%EC%9E%84-%ED%91%9C%EC%8B%9C-%EC%B2%98%EB%A6%AC-%EB%B0%A9%EB%B2%95

[CSS] 텍스트 ellipsis(...) 말줄임 표시 처리 방법!

잘못된 내용이 있다면 지적부탁드립니다. 방문해주셔서 감사합니다.