text-overflow를 활용해 텍스트 줄임표를 설정하거나, 지정문자열로 설정할 수 있습니다.

🐇 활용 예시

텍스트 라인에 따라 오버플로우 적용방식을 설정할 수 있도록 sass를 활용하여 제작한 코드입니다.

@mixin setTextOverflow($line: 1, $width: 100%) {
  width: $width;
  overflow: hidden;
  @if $line == 1 {
    white-space: nowrap;
    text-overflow: ellipsis;
    &:hover {
      white-space: normal;
    }
  } @else {
    display: -webkit-box;
    -webkit-line-clamp: $line;
    -webkit-box-orient: vertical;
    word-break: break-word;
    white-space: pre-line;
    &:hover {
      display: inline;
    }
  }
}

🥕 예외

가변너비에 text-overflow를 적용한다면 white-space, word-break 등 각 속성값의 판단에 따라 너비가 변경될 수 있기 때문에 정확한 위치에서 글자를 잘라내고 싶다면, 불변너비값을 너비속성값에 제공해야한다.

🐇 word-break

텍스트가 오버플로우 될 때, 줄을 바꿀지 지정하는 방법입니다.

🥕 normal

특정 상황 기본 줄 바꿈 규칙으로 되돌릴 때 많이 사용합니다.

🥕 break-all

오버플로우를 방지하기 위해 어떤 두개의 문자 사이에도 줄바꿈이 발생할 수 있습니다.
즉, 텍스트의 오버플로가 시작하는 정확한 지점에서 줄을 바꿉니다. 단어 전체를 다음 줄로 이동하면 중간을 끊지 않아도 될 상황에서도 마찬가지입니다.

🥕 break-word

mdn에 삭제 예정인 속성입니다. 해당속성은 overflow-wrpa의 break-word

🐇 white-space

🥕 normal

연속 공백을 하나로 합치며, 자동으로 줄을 바꿉니다. 변경했던 white-space 속성값을 기본으로 되돌릴 때 많이 사용합니다.

🥕 nowrap

연속 공백을 하나로 합칩니다. 줄바꿈이 없는 한줄로 변경하는 모습입니다.

🥕 pre-wrap

nowrap과 비슷하나, 한줄이 너무 길 경우 자동으로 줄바꿈을 진행합니다.

	개행 문자	스페이스, 탭	자동 줄 바꿈	줄 끝의 공백
normal	병합	병합	예	제거
nowrap	병합	병합	아니오	제거
pre	유지	유지	아니오	유지
pre-wrap	유지	유지	예	넘침
pre-line	유지	병합	예	제거
break-spaces	유지	유지	예	줄 바꿈

🐇 overflow-wrap

내용 칸 밖으로 문자가 넘치치 않게 브라우저가 단어 마디 안에 줄을 바꿔야 할 것인지 정할 때 사용합니다.
word-break와 달리, 모든 단어가 넘치지않으면 줄안에 놓여있을 수 없을 때 줄 바꿈을 한번만 진행합니다.

🥕 break-word

보통 안 바꿔지는 단어들을 한 줄에서 대신 줄을 바꿀 만한 지점이 없을 시 임의의 지점에서 줄을 바꿉니다.