CSS

텍스트 처리

걍가영 2020. 7. 23. 17:43

text-overflow

텍스트가 컨텐츠 밖으로 넘칠 때 텍스트 어떻게 처리할지 지정하는 속성

inline 속성은 속성을 block 혹은 inline-block 설정 

  1. width 혹은 height가 고정적
  2. overflow: hidden 사용
  3. 텍스트가 내려가는 것을 막기 위해 white-space: nowrap 등이 필요
  • clip : 텍스트를 자름 (기본값)
  • elipsis : 잘린 텍스트를 생략 부호(...)로 표시
  • string : 잘린 텍스트 지정한 문자열로 표시, "지정할 문자열";
p {
    text-overflow: elipsis;
}

 

 

white-space

요소가 공백 문자를 처리하는 법을 지정하는 속성

  • normal
  • nowrap
  • pre
  • pre-wrap
  • pre-line
  • break-spaces
p {
    white-space: nowrap;
}