ellipsis를 넣었는데 긴 제목이 계속 튀어나온다

긴 제목에 text-overflow: ellipsis를 넣었는데도 카드 밖으로 글자가 이어지거나 여러 줄로 내려간다. 한 줄 말줄임을 하려면 제목을 담은 박스의 폭이 제한되고, 그 안에서 줄바꿈 없이 넘친 글자가 잘려야 한다. ellipsis 선언만으로 박스가 좁아지거나 한 줄이 되지는 않는다. MDN의 text-overflow 설명↗ (새 탭에서 열림)도 이 속성 자체가 넘침을 만들지는 않는다고 구분한다.

제목을 담은 요소에서 실제 적용값을 읽는다

문제가 있는 페이지의 개발자 도구 Console에서 아래 코드를 실행한다. .title은 실제 제목 문자열이 들어 있는 요소의 선택자로 바꾼다. 같은 클래스가 여러 개라면 해당 카드의 ID 등을 앞에 붙여 하나를 지정한다. 스타일 파일에 쓴 선언과 화면에서 사용되는 폭을 함께 확인하는 코드다.

(() => {
  const el = document.querySelector('.title');
  const s = getComputedStyle(el);
  return {
    display: s.display, width: s.width,
    whiteSpace: s.whiteSpace, overflowX: s.overflowX,
    textOverflow: s.textOverflow,
    clientWidth: el.clientWidth, scrollWidth: el.scrollWidth,
    rectWidth: el.getBoundingClientRect().width
  };
})()

선택자를 찾지 못하면 getComputedStyle에서 오류가 나므로 먼저 Elements 패널에서 대상을 확인한다. getComputedStyle↗ (새 탭에서 열림)은 스타일시트 등을 적용한 뒤의 값을 돌려준다. 예를 들어 whiteSpace: "normal"이 나오면 작성한 nowrap이 현재 그 요소에 적용된 상태가 아니다.

일반 흐름의 span처럼 비대체 inline 요소라면 width: 240px를 써도 그 폭으로 제한되지 않는다. width의 적용 대상↗ (새 탭에서 열림)에서 이런 inline 요소는 제외된다. 아래 별도 실험에서는 display: "inline", width: "240px"인데 실제 표시 폭인 rectWidth는 584px였다. 선언을 읽은 것만으로 폭이 잡혔다고 판단하면 놓치는 경우다.

이때 clientWidth와 scrollWidth는 둘 다 0으로 나왔다. 글자가 없거나 안 넘친다는 뜻으로 읽으면 안 된다. clientWidth 문서↗ (새 탭에서 열림)는 inline 요소에서 이 값이 0임을 설명한다. 먼저 display를 보고, 블록 컨테이너로 바꾼 뒤 내부 폭을 비교한다.

일반 흐름에서는 이 조합으로 비교할 수 있다

다음은 제목을 직접 담은 .title을 블록으로 만들고 한 줄 말줄임을 적용한 작은 예제다. 빈 HTML 파일에 저장해 브라우저로 열 수 있다. 기존 페이지에서는 .title의 규칙을 실제 제목 요소에 적용한다. 240px는 비교용 폭이므로 서비스에서는 카드가 제목에 허용하는 폭에 맞춘다.

<!doctype html>
<meta charset="utf-8">
<style>
  .frame { width: 240px; outline: 1px solid #c34; }
  .title {
    display: block;
    width: 240px;
    font: 16px/24px monospace;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
</style>
<div class="frame"><span class="title">A long synthetic title for checking single line ellipsis in a narrow card</span></div>

이 예제에서 앞의 조회 코드는 display: "block", width: "240px", whiteSpace: "nowrap", overflowX: "hidden", textOverflow: "ellipsis", clientWidth: 240, scrollWidth: 584, rectWidth: 240을 반환했다. 화면에서는 오른쪽 끝에 말줄임표가 보였다. 글꼴이 다르면 584라는 수치는 달라질 수 있다.

속성을 넣는 위치도 맞아야 한다. text-overflow는 블록 컨테이너에 적용되고 상속되지 않는다. 바깥 카드에만 선언하고 제목이 별도 블록 안에 있다면 그 제목 블록의 적용값을 읽어야 한다. CSS Overflow 명세의 적용 조건↗ (새 탭에서 열림)은 해당 블록의 줄 안에서 넘친 내용을 다룬다. 이 예제는 span이 그 블록 컨테이너가 되도록 바꾼 구조다.

같은 너비 측정값이어도 말줄임표는 다를 수 있다

원인을 나누기 위해 새 브라우저 프로필의 정적 페이지에서 위 합성 제목을 비교했다. 부모는 240px로 고정하고, 정상 조합에서 속성 하나씩만 바꿨다. Windows 11, headless Chromium 153 계열, 1100×1100 뷰포트, 장치 픽셀 비율 1의 관찰이다. 다음 수치는 제목 요소의 clientWidth / scrollWidth이며 단위는 CSS px다.

• 정상 조합: 240 / 584. 높이 24px의 한 줄이고 끝에 말줄임표가 보였다.
• display: inline만 변경: 0 / 0. 표시 폭은 584px였고 제목이 부모 밖으로 이어졌다.
• white-space: normal만 변경: 240 / 240. 단어 사이에서 줄바꿈되어 높이가 72px, 세 줄이 됐다. 이 제목에서는 가로 넘침이 없어 말줄임표도 없었다.
• overflow: visible만 변경: 240 / 584. 정상 조합과 수치는 같지만 글자가 박스 밖까지 그대로 보였다.
• width: max-content만 변경: 584 / 584. 부모는 240px인데 제목 박스가 584px로 늘어났다. 제목 자신의 박스 안에서는 넘치지 않았다.
• text-overflow: clip만 변경: 240 / 584. 끝이 잘렸지만 말줄임표는 없었다.

scrollWidth↗ (새 탭에서 열림)는 넘쳐서 보이지 않는 내용까지 포함한 가로 영역의 폭이다. 블록에서 scrollWidth > clientWidth는 가로 넘침을 찾는 단서지만, 말줄임표가 그려졌다는 증거는 아니다. 정상·visible·clip 세 조건의 수치는 같았고, 스크린샷에서 표시 차이를 확인했다. 값이 맞아도 안 보이면 현재 적용된 overflowX와 textOverflow를 확인하고 화면 끝도 함께 본다.

nowrap은 여기서 제목을 한 줄로 유지하기 위해 쓴다. normal이면 언제나 말줄임표가 불가능하다는 뜻은 아니다. 끊을 수 없는 긴 단어가 줄의 폭을 넘는 경우도 명세의 적용 범위다. 반대로 여러 줄이 된 글의 맨 아래를 생략하는 처리는 이 속성의 역할이 아니므로, 두세 줄까지만 보여 주려는 요구는 다중 행 clamp 문제로 따로 다룬다.

고정 px 폭을 제목에 반드시 직접 써야 하는 것도 아니다. 같은 일반 흐름에서 .title의 width만 auto로 바꿔도 부모의 240px 안에 배치되어 240 / 584와 말줄임표가 유지됐다. 짧은 Short title로 바꾸면 240 / 240이 되어 생략되지 않았다. 필요한 것은 내용보다 좁게 실제 사용되는 폭이다. flex나 grid 안에서 제목 또는 그 부모가 줄어들지 않는다면 레이아웃의 최소 크기 제한을 따로 조사해야 한다. 이 실험은 그 제한을 풀어 주는 방법까지 검증한 것은 아니다.

화면에서 줄여도 원문을 읽을 길은 남긴다

제목 문자열 자체를 잘라 ...로 저장하지 않고 원문을 DOM에 유지한다. 실험에서도 긴 제목의 textContent는 모든 조건에서 같았다. 화면에서 생략된 부분을 사용자가 읽어야 한다면 전체 제목이 있는 상세 화면이나 키보드로 열 수 있는 펼침 영역을 제공한다. 비교 페이지의 별도 펼침 영역은 키보드 Enter로 열리고 전체 문자열이 표시되는 것까지 확인했다.

title 속성의 마우스 툴팁 하나만을 원문 확인 수단으로 삼지는 않는다. MDN의 title 접근성 설명↗ (새 탭에서 열림)은 터치·키보드·보조 기술 사용 시의 문제를 다룬다. 이번 확인은 영문 합성 제목과 일반 가로쓰기의 단일 브라우저에 한정한다. 실제 스크린리더의 읽기, 휴대전화 터치, 다른 엔진·글꼴, 세로쓰기는 실행하지 않았다.