JS) 요소 내부 텍스트 넘칠 경우 생략(...)

이지우·2022년 11월 24일
0

https://webruden.tistory.com/655
https://devbirdfeet.tistory.com/140

  • 요소 내부의 텍스트가 길어질 경우 이를 생략할 필요가 있다.
    그 방법으론 크게 한 줄/ 두 줄 이상의 경우로 나뉨
    -> white-space 속성 값과 width/height 중 무엇을 고정할지가 핵심
/* 한줄 */
.movieList .movie-Name {
	font: bold 17px ;
	width: 100%;
	overflow: hidden;  		
	white-space: nowrap;
	text-overflow: ellipsis; 

	
} 

/* 두 줄 이상 */
.commentsList .slide-inner .commentContents{
	height : 192px;
	white-space: normal; /* 줄바꿈 */
	overflow: hidden; /* 요소 크기 넘어가는 경우 표시 허용 여부 */
	text-overflow :ellipsis; /* 넘어간 텍스트 ...로 대체 */
	word-wrap : brek-word; 
	display: -webkit-box;
	-webkit-line-clamp:12; 
	-webkit-box-orient:vertical;
}
  • 참고) 두 줄 이상에서 line-clamp 속성값의 줄에서 ... 표시한다는 것이지 그 이후의 텍스트가 생략되지 않음(height 값 적절히 조정해서 이하의 텍스트 보이지 않도록 조절)
    -> 더 세련된 방법이 있지않을까..

profile
IT개발 입문합니다.

0개의 댓글