word-break, white-Space, word-wrap, text-overflow

#word-break

 

텍스트가 글자상자를 넘어갈때 글자를 줄바꿈하는 방법

word-break: normal;
word-break: break-all; //특수문자를 제외하고 강제로 줄바꿈 
word-break: keep-all; //한글일 경우 띄어쓰기 기준으로 짤림
word-break: break-word; /* deprecated */ 특수문자를 포함하고 강제 줄바꿈 
word-break:nowrap; //줄바꿈 하지 않음

 

#white-Space

공백을white-space 처리하는 방법

 

white-space: normal; 
white-space: nowrap; //스페이스로 들어간 연속공백은 통합 = pre의 효과, 줄바꿈X
white-space: pre; //원문 그대로 출력
white-space: pre-wrap; //탭과 스페이스 공백을 있는 그대로 표시, 자동 줄바꿈
white-space: pre-line; //스페이스 그대로표시, 탭은 공백1개만 표시, 자동줄바꿈

 

 

#word-wrap

띄어쓰기가 없는 긴 단어처리 하는 방법

 

word-wrap: normal; //break point에서 줄바꿈시킴
word-wrap: break-word //요소의 경계에서 break point가 아니어도 줄바꿈시킴

 

 

#text-overflow

넘치는 텍스트 표기

 

text-overflow: clip //넘치는 텍스트를 자름
text-overflow: ellipsis //말 줄임표로 표시

 

 

반응형

 

 

 

1. css 한줄표시

 

👀보통 제목에서 1줄표시를 할때 많이 사용한다. display:block과 width값을 지정해 줘야함

.ellipsis {
  width: 200px;
  white-space: nowrap; //줄바꿈 안시키기 위해 적용
  overflow: hidden;
  text-overflow: ellipsis;  /* 말줄임 적용 */
}

 

 

2.css 두줄이상 표시

 

🙌1줄이상 일때 말줄임 표시

 

.ellipsis {
  overflow: hidden;
  white-space: normal;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2; //2줄로 할꺼임
  -webkit-box-orient: vertical;
  word-break: keep-all;   // 줄바꿈 시키기 위해 추가
}