텍스트 줄바꿈과 말줄임

개념 이해하기

overflow-wrap은 긴 단어를 줄바꿈하고 text-overflow:ellipsis는 한 줄 넘침을 말줄임표로 표시합니다. ellipsis는 overflow:hidden과 white-space:nowrap이 함께 필요합니다.

p.target은 white-space: nowrap 때문에 긴 문장을 한 줄로만 이어 쓰고, 260px 상자 밖으로 나간 부분을 overflow: hidden이 자르면 text-overflow: ellipsis가 잘린 자리에 말줄임표를 찍습니다. 잘린 부분도 문서에는 그대로 남아 있어 화면 읽기 프로그램은 문장을 끝까지 읽습니다. h1의 text-shadow는 흐림 값이 0이라 글자 모양 그대로 오른쪽 아래 2px 지점에 연한 초록 그림자를 겹칩니다.

한국어 문장은 기본 설정에서 음절 사이 어디서든 줄이 바뀌어 단어 중간이 끊길 수 있습니다. word-break: keep-all을 주면 공백에서만 줄을 바꿔 어절이 쪼개지지 않으므로, 제목이나 버튼 문구처럼 짧고 눈에 띄는 텍스트에 자주 씁니다.