CSS Flexbox 말줄임표가 안 나올 때 min-width 설정 방법

Flexbox 안에서 긴 파일명에 text-overflow: ellipsis를 넣었는데 말줄임표가 나오지 않고 옆 버튼이 밀린다면, 텍스트를 감싼 Flex 아이템의 최소 너비부터 확인하세요. 가로 배치에서 그 요소에 min-width: 0을 주고, 실제 글자가 들어 있는 요소에는 한 줄 말줄임 규칙을 따로 적용하면 해결할 수 있습니다.

말줄임 설정과 줄어들 수 있는 너비는 별개입니다

예를 들어 첨부파일 목록은 파일명 영역과 상세 보기 버튼을 한 줄에 놓습니다. 파일명 문단에 white-space: nowrap, overflow: hidden, text-overflow: ellipsis를 모두 적용해도 상위 파일명 영역이 내용 너비만큼 벌어져 있으면 잘릴 글자가 없습니다. 긴 문자열은 그대로 들어가고 버튼만 행 밖으로 밀립니다.

Flex 아이템의 min-width 기본값은 auto입니다. 주축이 가로이고 overflow가 기본값인 visible인 일반 요소에서는 내용 기반 최소 크기가 축소를 막을 수 있습니다. flex-shrink를 키우거나 flex: 1을 넣는 것만으로 이 최소 크기 제한이 없어지지는 않습니다. 이는 W3C Flexbox 명세의 자동 최소 크기 규칙으로 확인할 수 있습니다. 자동 최소 크기 규칙

320px 파일 목록 행으로 재현하기

아래 내용을 example.html로 저장해 브라우저에서 여세요. A가 길게 이어지는 파일명은 테스트 입력입니다. 버튼 동작은 넣지 않고 너비와 말줄임만 확인하는 예제이며, 실제 서비스의 상세 화면 연결은 별도로 구현해야 합니다.

<!doctype html>
<meta charset="utf-8">
<title>Flex 말줄임 확인</title>
<style>
  .file-row { display: flex; width: 320px; gap: 12px; }
  .file-name { flex: 1 1 0; min-width: 0; }
  .file-title {
    margin: 0;
    font: 16px monospace;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .file-action { flex: 0 0 80px; }
</style>
<div class="file-row">
  <div class="file-name">
    <p class="file-title">견적서_AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA.pdf</p>
  </div>
  <button class="file-action" type="button">상세 보기</button>
</div>

수정 대상은 .file-title이 아니라 .file-row의 직접 자식인 .file-name입니다. 이 요소가 Flex 아이템이므로 min-width: 0으로 내용보다 작게 줄어들 수 있게 합니다. 문단에는 글자를 한 줄로 유지하고 넘친 부분을 숨기는 규칙을 둡니다. text-overflow는 그 숨겨진 부분을 어떻게 표시할지 정할 뿐 스스로 너비를 줄이지 않습니다. 말줄임 표시 규칙

.file-action은 flex: 0 0 80px로 공간을 고정합니다. 예제에는 행의 패딩이나 테두리가 없으며, 버튼과 파일명 사이 간격은 12px입니다. Chrome 145 기반 브라우저에서 실행했을 때 파일명 영역은 228px, 텍스트의 scrollWidth는 668px였고 말줄임표도 화면에서 확인했습니다. 글꼴에 따라 텍스트 전체 너비는 달라질 수 있습니다.

개발자 도구에서 수정 전후를 비교하세요

예제 페이지의 콘솔에서 다음 코드를 실행하면 행과 텍스트의 내부 너비, 내용이 차지하는 너비를 비교할 수 있습니다. clientWidth는 테두리를 제외한 내부 너비이고, scrollWidth는 숨겨진 내용을 포함해 가로 공간이 얼마나 필요한지 확인하는 값입니다. clientWidth · scrollWidth

const row = document.querySelector('.file-row');
const title = document.querySelector('.file-title');
console.log({
  row: row.clientWidth,
  rowScroll: row.scrollWidth,
  title: title.clientWidth,
  titleScroll: title.scrollWidth
});

• 수정 후에는 row와 rowScroll이 모두 320이며 title은 228, titleScroll은 668이었습니다. 행 밖으로 레이아웃이 넘치지 않으면서 텍스트 내부에 잘릴 내용이 있는 상태입니다.
• .file-name의 min-width를 auto로 되돌리면 row는 320인데 rowScroll은 760이 되었습니다. title과 titleScroll이 모두 668이라 문단 안에서 잘릴 부분은 없고, 행이 넘쳤습니다.
• 이 상태에서 .file-title에만 min-width: 0을 추가해도 결과는 같았습니다. 상위 Flex 아이템의 최소 크기를 고치지 않았기 때문입니다.

행 너비를 240px로 바꾸면 수정한 파일명 영역은 148px가 되고 행 넘침은 없었습니다. 반대로 파일명을 견적서.pdf로 줄이면 title과 titleScroll이 모두 228이 되어 말줄임이 필요하지 않았습니다. 짧은 이름만 테스트하면 문제가 숨어 있으므로 공백 없는 긴 식별자와 좁은 행을 함께 확인하세요.

전체 파일명을 확인할 경로까지 남겨야 합니다

실제 화면에서 여전히 밀린다면 파일명 위쪽에 또 다른 Flex 아이템이 있는지, 고정 width나 더 큰 min-width가 덮어쓰는지 개발자 도구의 적용 스타일을 확인하세요. 중첩된 레이아웃에서는 축소를 막는 상위 요소가 남아 있을 수 있습니다. 전체 영역에 overflow: hidden을 무작정 넣기보다 어떤 박스가 넘치는지부터 찾는 편이 수정 범위를 줄입니다.

이 예제는 가로 Flex 행의 한 줄 텍스트를 다룹니다. 여러 줄 말줄임이나 세로 스크롤 영역의 높이 문제는 같은 설정으로 검증하지 않았습니다. 너비 비교도 넘침 여부를 보여줄 뿐 말줄임표의 실제 렌더링이나 접근성을 전부 보장하지 않으므로 화면 확인을 함께 해야 합니다.

파일명 앞부분이 같은 문서가 여럿이면 말줄임만으로 선택하기 어렵습니다. 실제 상세 보기 화면에는 전체 파일명과 문서 식별자를 표시하고, 키보드로도 열 수 있게 설계하세요. 마우스를 올렸을 때만 보이는 안내에 전체 이름을 맡기지 않는 편이 좋습니다. 말줄임은 목록 배치를 위한 표시 방식이지 원문 데이터를 삭제하는 처리가 아닙니다.

소프트모아의 업무 시스템과 웹 개발 서비스는 softmoa.com에서 확인할 수 있습니다.

소프트모아는 해당 시스템을 구축합니다. 문의하기