[CSS] text-overflow: ellipsis, css한줄줄임말, 여러줄줄임말

안녕하세요 찐망고 입니다.

css로 줄임말 만드는 포스팅을 했던것 같은데 글이 없어서 포스팅을 시작해봅니다.

때마침 한줄 줄임말과, 여러줄 줄임말이 딱 보이는 예제를 해서 😊

 

주석예시이미지

 

css 한줄 주석

/* 한줄 줄임말 */
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

 

• overflow: hidden; 적용시 width값은 필수 
• white-space: nowrap; 이용하여 해당 텍스트들이 한줄로 나오게 처리
• text-overflow: ellipsis; 말줄임표시

 

css 여러줄 주석

 /* 세줄 줄임말 */
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-word;
/* 제목요소가 한글인 경우 */
word-break: keep-all;

display: -webkit-box;
-webkit-line-clamp: 3;
line-clamp: 3;
-webkit-box-orient: vertical;

 

• word-break를 이용하여 단어 줄바꿈
• -webkit-line-clamp의 값을 통해 줄수를 변경

 

 

 

word-break 관련 좋은 포스팅이 있어 공유합니다

word-break 속성과 word-wrap 속성 알아보기 | WIT블로그

 

-webkit-관련 좋은 포스팅이 있어 같이 공유합니다

CSS3 벤더 프리픽스