긴 텍스트의 줄바꿈, 말줄임과 쓰기 방향을 제어합니다.
overflow-wrap은 긴 단어를 줄바꿈하고 text-overflow:ellipsis는 한 줄 넘침을 말줄임표로 표시합니다. ellipsis는 overflow:hidden과 white-space:nowrap이 함께 필요합니다.
이번 예제의 출발점은 overflow:hidden; white-space:nowrap; text-overflow:ellipsis;입니다. 선택자가 고른 요소와 실제로 계산된 값을 개발자 도구에서 나란히 보면 선언이 적용되지 않은 이유를 빠르게 찾을 수 있습니다.
처음에는 예제를 그대로 확인한 다음 white-space를 normal로 바꾸고 overflow-wrap을 추가하세요. 한 번에 한 값만 바꾸고 좁은 화면, 키보드 포커스와 200% 확대에서도 내용이 사라지지 않는지 확인하세요.
말줄임으로 숨긴 전체 내용을 사용자가 확인할 방법이 없으면 정보가 사라집니다.
직접 바꿔보세요white-space를 normal로 바꾸고 overflow-wrap을 추가하세요.