Text-overflow
- text가 overflow되었을 때 어떻게 처리할 것인가를 나타내는 속성
- overflow 속성이 hidden 등 overflow 속성이 값을 갖고 있을 때 적용이 가능
- 엘리먼트 크기 이상의 글이 들어있음을 말 줄임표 ...을 이용하여 나타내줌
text-overflow : clip | ellipsis | string
clip - Clips the text
ellipsis - Render an ellipsis ("...") to represent clipped text
string - Render the given string to represent clipped text
text-overflow-mode
- clip | ellipsis | ellipsis-word | inherit
clip - 엘리먼트 테두리에서 글자가 잘리게 됨
ellipsis - 테두리에 닿을 정도가 되면 text-overflow-ellipsis 속성에 정해준 string이 표시. 기본값은"..."
ellipsis-word - 테두리에 닿을 마지막 단어에서 자르게 된다.
text-overflow-ellipsis
- text-overflow-mode의 값이 ellipsis일 때 들어갈 string을 정해줍니다. url을 지정하여 이미지를 삽입할 수도 있고 string을 넣을때는 엘리먼트의 폰트크기와 동일하게 된다.
- url | text | inherit
url - 이미지 경로를 나타내줌
text - 글자가 잘릴때 들어가는 string ellipsis-end와 ellipsis-after가 같은 곳에 표기될 경우 ellipsis-after만 표기된다.
