SimCoding

[CSS] div태그 white-space로 줄바꿈 처리하기. 안녕하세요. 이번 포스팅에서는 white-space를 이용해 div에서 줄바꿈 처리하는 방법에 대해 알아보겠습니다. white-space에 사용할 수 있는 값은 다음과 같습니다. normal : HTML의 기본 값이다. 여러개의 공백은 하나로 표시되고, \n은 무시되며 긴 행은 필요시에 Wrap 된다. nowrap : normal과 같은데, 긴행이 wrap되지 않는다. 글을 포함한 컨테이너를 넘어서 표시된다. pre : 여러개의 공백과 개행문자가 모두 표현된다. 긴행은 개행문자에서만 개항이 되고, wrap되지 않는다. pre-line : 여러개의 공백은 하나로 표시되고, 긴 행은 필요시 wrap된다. 개행 문자를 만나도 개행된다. pre-wr..

[CSS] Textarea 말줄임 표시, 줄수제한 안녕하세요. 오늘은 CSS를 활용해, Textarea의 줄수를 제한해서 보여주는 방법에 대해 알아 보겠습니다. "-webkit-line-clamp" 속성을 이용해서 보여지는 줄 수를 제한할 수 있습니다. 단, "-webkit-line-clamp" 속성이 실행되기 위해서는 "display: -webkit-box" , "-webkit-box-orient: vertical" 로 설정되어 있어야 합니다. 예시코드 display: -webkit-box; -webkit-line-clamp: 2; // 줄수, 2일경우 2줄 -webkit-box-orient: vertical; line-height: 1.8; overflow: hidden;