CSS 오버플로우 모듈 레벨 3

1. 소개

CSS Level 1 [CSS1]에서는, 지정된 크기를 가진 요소에 들어갈 수 있는 양보다 많은 콘텐츠를 배치하는 것이 일반적으로 작성 오류였습니다. 이렇게 하면 콘텐츠가 요소의 경계를 넘어 확장되어 다른 요소와 겹칠 가능성이 있었습니다.

CSS Level 2 [CSS2]에서는 overflow 속성이 도입되어, 오버플로우를 스크롤로 처리할 수 있게 하였으며, 더 이상 작성 오류가 아니게 되었습니다. 또한 오버플로우를 클리핑으로 처리하도록 지정할 수 있는데, 이는 작성자가 콘텐츠가 보이지 않기를 의도할 때 적합합니다.

이 명세는 오랫동안 사실상 표준처럼 사용되어 온 overflow-x 및 overflow-y 속성을 도입하고, clip 값을 추가하며, 오버플로우 처리를 더욱 명확하게 정의합니다.

[Something something max-lines.]

참고: 이 명세는 text-overflow 속성의 정의도 함께 포함하고 있습니다. [CSS-UI-3]에서 이미 정의된 내용과 동일하며, 추가나 수정 없이, text-overflow와 block-ellipsis를 함께 제시하기 위함입니다.

1.1. 값 정의

이 명세는 CSS 속성 정의 규약을 따르며, [CSS2]에서 정의된 규약과 값 정의 문법을 [CSS-VALUES-3]에서 사용합니다. 이 명세에서 정의되지 않은 값 타입은 CSS Values & Units [CSS-VALUES-3]에서 정의됩니다. 다른 CSS 모듈과의 결합으로 이러한 값 타입의 정의가 확장될 수 있습니다.

각 속성 정의에 명시된 값 외에도, 이 명세에서 정의된 모든 속성은 CSS 전역 키워드도 속성 값으로 허용합니다. 가독성을 위해 별도로 반복하지 않았습니다.

1.2. 모듈 상호작용

이 모듈은 [CSS2]의 11.1 오버플로우 및 클리핑과 [CSS-UI-3]의 5.2. 오버플로우 생략부호: text-overflow 속성에서 정의된 기능을 대체(확장)합니다.

2. 오버플로우 개념 및 용어

CSS는 overflow라는 용어를 사용하여 박스의 한쪽 경계(즉, content edge, padding edge, border edge, margin edge)를 넘어 확장되는 박스의 내용을 설명합니다. 이 용어는 오버플로우를 유발하는 요소나 기능, 해당 기능이 차지하는 비직사각형 영역, 또는 일반적으로 그 영역을 감싸는 최소 사각형을 의미할 수 있습니다. 박스의 오버플로우는 박스 자체의 레이아웃과 스타일, 그리고 containing block chain에 박스가 포함된 모든 자손의 레이아웃과 스타일을 기반으로 계산됩니다.

대부분의 경우, overflow는 박스 자체의 경계와 속성, 그리고 각 자식의 overflow를 통해 계산할 수 있습니다. 하지만 항상 그런 것은 아니며, 예를 들어 자식 중 일부에 transform-style: preserve-3d [CSS3-TRANSFORMS]가 사용된 경우, 해당 자손의 transform-style: preserve-3d도 함께 고려해야 합니다.

오버플로우에는 두 가지 유형이 있으며, UA에서 서로 다른 목적으로 사용됩니다:

• 잉크 오버플로우
• 스크롤 가능한 오버플로우

2.1. 잉크 오버플로우

잉크 오버플로우는 박스 및 그 내용이 박스의 border box 바깥에서 시각적 효과를 생성하는 부분입니다. 잉크 오버플로우는 레이아웃에 영향을 주지 않거나 스크롤 가능한 오버플로우 영역을 확장하지 않는 페인팅 효과의 오버플로우를 의미하며, box-shadow, border images, text decoration, 음수 사이드 베어링이나 em 박스 바깥으로 확장되는 글리프(ascender/descender), outlines 등이 이에 해당합니다.

CSS의 일부 효과(예: text-shadow [CSS-TEXT-3] 및 box-shadow [CSS-BACKGROUNDS-3]의 블러 등)는 이론적으로 무한하며, 시각적 범위를 명확히 정의하지 않으므로 잉크 오버플로우의 범위는 정의되지 않습니다.

잉크 오버플로우 영역은 박스 및 그 내용의 잉크 오버플로우가 차지하는 비직사각형 영역이며, 잉크 오버플로우 사각형은 박스의 축에 맞춰진 최소 사각형으로, 잉크 오버플로우 영역을 포함합니다. 잉크 오버플로우 사각형은 박스의 좌표계에서는 사각형이지만, 변형(transform)으로 인해 다른 좌표계에서는 비직사각형일 수 있습니다. [CSS3-TRANSFORMS]

대체(replaced) 콘텐츠의 오버플로우는 항상 잉크 오버플로우입니다(스크롤 가능한 오버플로우와 구분).

2.2. 스크롤 가능한 오버플로우

스크롤 가능한 오버플로우는 박스의 padding edge 바깥으로 확장되어 스크롤 메커니즘이 제공되어야 하는 부분을 의미합니다.

스크롤 가능한 오버플로우 영역은 스크롤 가능한 오버플로우가 차지하는 비직사각형 영역이며, 스크롤 가능한 오버플로우 사각형은 박스의 축에 맞춰진 최소 사각형으로, 스크롤 가능한 오버플로우 영역을 포함합니다.

스크롤 가능한 오버플로우 영역은 다음의 합집합입니다:

• 스크롤 컨테이너 자신의 padding box.
• line box 중 스크롤 컨테이너에 직접 포함된 것.
• 스크롤 컨테이너가 containing block인 모든 박스의 border box 중, 음수 스크롤 오버플로우 영역에 완전히 위치하지 않은 것. 변형(transform)이 적용된 경우, 각 박스를 해당 3D 렌더링 컨텍스트 평면에 투영하여 계산합니다. [CSS3-TRANSFORMS]

  변형 처리 설명이 충분히 정확한지 확인 필요

  영역이 0인 border box는 스크롤 가능한 오버플로우 영역에 영향을 주지 않습니다.

• grid item 및 flex item 박스의 margin 영역(스크롤 컨테이너가 containing block인 경우).

  UA는 추가적으로 다른 박스의 margin 영역도 포함할 수 있지만, 포함 조건은 이 레벨에서 정의되지 않습니다. 추가 테스트 및 조사가 필요하며, 본 드래프트에서는 연기됨.

• 위의 모든 박스(영역 0 박스 포함)의 스크롤 가능한 오버플로우 영역. 단, 해당 박스가 overflow: visible이어야 하며(즉, 오버플로우를 자체적으로 가두지 않아야 함), 스크롤 가능한 오버플로우가 이미 클리핑되지 않아야 합니다 (예: clip 속성이나 contain 속성 등).

  참고: mask-* 속성([CSS-MASKING-1])은 스크롤 가능한 오버플로우 영역에 영향을 주지 않습니다.

  어떤 것이 스크롤 가능한 오버플로우를 클리핑해야 하는지 평가 필요. [Issue #8607]

• end 방향에 추가된 padding(스크롤 위치가 place-content: end 정렬 요구사항을 만족하도록).

  참고: 이 padding은 스크롤 가능한 오버플로우 사각형 내에서 박스 자체의 padding을 나타내며, 콘텐츠가 끝까지 스크롤될 때 인플로우(또는 플로트) 콘텐츠의 끝과 박스의 border edge 사이에 padding이 있도록 합니다. 일반적으로 박스의 padding과 동일한 크기가 되지만, 예를 들어 out-of-flow 포지셔닝 요소나 자손의 가시적 오버플로우가 이미 스크롤 가능한 오버플로우 사각형을 박스의 “content edge” 바깥으로 확장한 경우에는 다를 수 있습니다.

  

또한, 웹 호환성 제약(작성자가 레거시 버그를 이용해 시각적 독자에게는 콘텐츠를 숨기고 검색엔진/음성 출력에는 노출시키는 경우 등)으로 인해, UA는 음수 스크롤 오버플로우 영역의 콘텐츠를 반드시 클리핑해야 하며, 스크롤 가능한 오버플로우가 scroll origin의 반대편에 없는 것처럼 동작해야 합니다.

참고: 스크롤 가능한 오버플로우 사각형은 박스의 좌표계에서는 항상 사각형이지만, 변형(transform)으로 인해 다른 좌표계에서는 비직사각형일 수 있습니다. [CSS3-TRANSFORMS] 이로 인해 실제로 필요하지 않은 경우에도 스크롤바가 나타날 수 있습니다.

2.3. 스크롤 오버플로우

박스의 overflow는 보이거나(visible) 클리핑될 수 있습니다. CSS는 박스가 스크롤 컨테이너가 되어, 사용자가 클리핑된 스크롤 가능한 오버플로우 영역을 스크롤로 볼 수 있도록 허용합니다. 스크롤 컨테이너의 시각적 뷰포트(스크롤 가능한 오버플로우 영역을 볼 수 있는 영역)는 padding box와 일치하며, scrollport라고 합니다. 박스의 가장 가까운 scrollport는 가장 가까운 스크롤 컨테이너 조상의 scrollport입니다.

스크롤 동작은 사용자가(예: 스크롤바 조작, 터치 스크린 스와이프, 키보드 조작 등) 또는 스크립트가 (예: scrollIntoView() 또는 focus() API 등) 시작할 수 있습니다. 스크롤 가능한 오버플로우 사각형이 scrollport 내에서 스크롤 동작이 적용되기 전의 초기 위치는 초기 스크롤 위치입니다. 초기 스크롤 위치는 일반적으로 스크롤 컨테이너의 writing mode에 따라 결정되며, 별도 명시가 없는 한 scroll origin position과 일치합니다. 단, align-content 및 justify-content 속성([CSS-ALIGN-3])을 사용하면 초기 스크롤 위치를 변경할 수 있습니다. 자세한 내용은 CSS Box Alignment 3 § 5.3 Overflow and Scroll Positions를 참고하세요.

스크롤 위치는 스크롤 가능한 오버플로우 사각형이 scrollport 내에서 특정 정렬 상태를 의미합니다. 스크롤 오프셋은 scroll origin으로부터의 거리입니다.

scroll origin은 스크롤 가능한 오버플로우 사각형의 기준 좌표로, 스크롤 가능한 오버플로우 사각형이 이 좌표를 기준으로 확장됩니다. 별도 명시가 없는 한, block-start inline-start 코너가 기준입니다. (예: flex container에서는 main-start cross-start 코너가 기준입니다.) scroll origin을 기준으로 양 축의 바깥 영역은 음수 스크롤 오버플로우 영역으로 간주되며, 이 영역에 렌더링된 콘텐츠는 사용자에게 접근할 수 없습니다. 자세한 내용은 § 2.2 스크롤 가능한 오버플로우를 참고하세요. 스크롤 컨테이너가 scroll origin에 스크롤된 상태란, scroll origin이 scrollport의 해당 코너와 일치하는 경우입니다. 이 스크롤 위치를 scroll origin position이라 하며, 일반적으로(항상은 아님) 초기 스크롤 위치와 일치합니다.

baseline alignment 등이 초기 스크롤 위치 또는 scroll origin position에 의존하는지 확인 필요.

스크롤 오프셋의 좌표계가 정의되어 있지 않습니다. 아래/오른쪽 증가, block/inline 축 끝 방향 증가, 또는 scroll origin에서 멀어지는 방향 등 각 API가 좌표 모델을 정의해야 할까요?

페이지 canvas를 스크롤하는 루트 뷰포트는 주요 writing mode를 사용하여 scroll origin 및 초기 스크롤 위치를 결정합니다.

참고: 스크롤 컨테이너(또는 그 조상)가 그래픽 변형(transform)의 대상인 경우, UA는 사용자 입력을 스크롤 동작에 매핑할 때 이 변형을 고려해야 할 수 있습니다. 예를 들어, 터치 스크린에서 사용자가 콘텐츠를 직접 드래그하여 스크롤할 때, 변형이 적용된 방향에 맞게 스크롤 방향이 맞춰져야 합니다. 반면, Page Down 키나 1D 스크롤 휠 등 다른 입력은 변형을 무시하는 것이 더 자연스러울 수 있습니다. 각 스크롤 메커니즘에 적합한 동작을 선택하는 것은 UA의 책임입니다.

3. 스크롤 및 클리핑 오버플로우

3.1. 오버플로우 관리: overflow-x, overflow-y, overflow 속성

이 속성들은 박스의 오버플로우가 클리핑되는지 여부와, 클리핑 시 스크롤 컨테이너가 되는지 여부를 지정합니다.

overflow-x 속성은 박스의 수평축(좌우) 오버플로우 처리를 지정하며, overflow-y는 수직축(상하) 오버플로우 처리를 지정합니다.

overflow-block 및 overflow-inline 속성도 각각 오버플로우의 block 및 inline 축 처리를 지정합니다.

이 네 속성은 논리 속성 그룹을 이루며, overflow 축약형과 함께 CSS 논리 속성 1 § 4 흐름-상대 박스 모델 속성에 정의된 대로 상호작용합니다.

overflow 속성은 축약형 속성으로, overflow-x와 overflow-y의 지정값을 순서대로 설정합니다. 두 번째 값이 생략되면 첫 번째 값을 복사합니다.

값의 의미는 다음과 같습니다:

visible

오버플로우에 특별한 처리를 하지 않으며, 박스의 콘텐츠가 경계 밖에 위치하면 그대로 렌더링됩니다. 박스는 스크롤 컨테이너가 아닙니다.

hidden

박스의 콘텐츠가 padding box로 클리핑되며, UA는 클리핑 영역 밖의 콘텐츠를 볼 수 있는 스크롤 UI를 제공하지 않습니다. 사용자가 직접 스크롤(터치 드래그, 마우스 휠 등)하는 것도 허용되지 않습니다. 단, [CSSOM-VIEW] 등 프로그래밍 방식의 스크롤은 허용되므로 박스는 여전히 스크롤 컨테이너입니다.

clip

박스의 콘텐츠가 overflow clip edge로 클리핑되며, UA는 클리핑 영역 밖의 콘텐츠를 볼 수 있는 스크롤 UI를 제공하지 않습니다. overflow: clip은 overflow: hidden과 달리 프로그래밍 방식의 스크롤도 완전히 금지하므로 박스는 스크롤 컨테이너가 아닙니다.

hidden과 달리, 이 값은 새로운 포맷팅 컨텍스트를 생성하지 않습니다.

참고: 포맷팅 컨텍스트도 필요하다면 display: flow-root와 overflow: clip을 함께 사용하세요.

scroll

콘텐츠가 padding box로 클리핑되지만, 스크롤로 볼 수 있습니다(박스는 스크롤 컨테이너임). UA가 스크롤바 등 시각적 스크롤 메커니즘을 사용하는 경우, 콘텐츠가 클리핑되지 않아도 항상 표시해야 합니다. 동적 환경에서 스크롤바가 나타났다 사라지는 문제를 방지합니다. print 미디어에서는 오버플로우된 콘텐츠가 인쇄될 수 있으나, 인쇄 위치는 정의되지 않습니다.

auto

박스에 스크롤 가능한 오버플로우가 있으면 scroll과 같고, 없으면 hidden과 같습니다. UA가 스크롤바 등 시각적 스크롤 메커니즘을 사용하는 경우, 오버플로우가 있을 때만 표시합니다.

visible/clip 값은 overflow에서, overflow-x 또는 overflow-y 중 하나라도 visible이나 clip이 아니면, 각각 auto/hidden으로 계산됩니다.

overflow의 계산값이 블록 박스에서 visible, clip 또는 그 조합이 아니면, 해당 박스는 독립적인 포맷팅 컨텍스트를 생성합니다.

UA는 overlay 키워드를 auto의 레거시 값 별칭으로 지원해야 합니다.

3.1.1. visibility와 overflow의 상호작용

visibility의 계산값이 hidden(또는 collapse가 hidden과 동일하게 동작할 때)이고, overflow가 scroll 또는 auto인 경우:

• UA는 스크롤 메커니즘을 화면에 표시하지 않아야 합니다. visibility: hidden이 없을 때 레이아웃에 영향을 주는 스크롤 메커니즘은 계속 레이아웃에 반영되지만, 페인팅되지 않습니다.

• overflow: hidden과 같이, 사용자 상호작용으로 직접 트리거되는 스크롤은 비활성화되지만, 프로그래밍 방식의 스크롤은 계속 동작합니다.

• 직접적인 상호작용(예: 마우스 휠 등)으로 visibility: hidden이 적용된 스크롤 컨테이너의 자손이 visibility: visible이어도, 상호작용 스크롤은 금지됩니다.

3.1.2. border-radius와 overflow의 상호작용

CSS Backgrounds 3 § 4.3 코너 클리핑에서 설명한 대로, overflow가 설정한 클리핑 영역은 둥글게 만들 수 있습니다:

• overflow-x와 overflow-y가 hidden, scroll, auto로 계산되면, 클리핑 영역은 border-radius에 따라 둥글게 되고, padding edge에 맞춰 조정됩니다. 자세한 내용은 CSS Backgrounds 3 § 4.2 코너 모양을 참고하세요.

• 두 축 모두 overflow-x와 overflow-y가 clip으로 계산되면, 클리핑 영역은 § 3.2 overflow-clip-margin 속성에 설명된 대로 둥글게 됩니다.

• 한 축이 overflow-x 또는 overflow-y가 clip이고, 다른 축이 visible이면, 클리핑 영역은 둥글게 처리되지 않습니다.

3.1.3. 인쇄 및 기타 정적 미디어에서의 오버플로우

정적 미디어(예: 인쇄)에서는 스크롤이 불가능하므로, 작성자는 모든 콘텐츠가 동시에 보이도록 @media print, (update: none) { … } 등으로 레이아웃을 조정해야 합니다.

비상호작용 미디어에서 스크롤 컨테이너에 overflow 값이 auto 또는 scroll(단, hidden은 제외)인 경우, UA는 스크롤 가능한 오버플로우를 표시(스크롤바, 생략부호 등)할 수 있습니다.

참고: 모든 페이징 미디어가 비상호작용인 것은 아닙니다. 예를 들어, e-book 리더는 페이징하면서도 상호작용이 가능합니다.

3.2. 클리핑 경계 확장: overflow-clip-margin 속성

이 속성은 박스의 overflow clip edge를 정의합니다. 즉, 박스의 경계에서 콘텐츠가 얼마나 멀리까지 페인팅될 수 있는지, overflow: clip 등 클리핑 효과가 overflow clip edge에 따라 클리핑하기 전까지 허용되는 범위를 지정합니다.

값의 의미는 다음과 같습니다:

<visual-box>

클리핑 기준이 되는 박스의 edge를 지정합니다(오프셋이 0일 때의 기준). 생략 시 padding-box가 기본값입니다.

<length [0,∞]>

지정된 오프셋만큼 overflow clip edge를 기준 edge에서 확장합니다. 음수 값은 허용되지 않으며, 생략 시 0이 기본값입니다.

overflow clip edge의 코너 모양은, 동일한 누적 오프셋의 spread radius를 가진 outer box-shadow와 동일하게 처리됩니다. 자세한 공식은 CSS Backgrounds 3 § 4.2 코너 모양 및 CSS Backgrounds 3 § 6.1.1 그림자 모양, 확장, 노크아웃을 참고하세요. 특히 border edge를 넘는 outsets 공식에 주의하세요.

참고: 이 속성은 overflow: hidden 또는 overflow: scroll이 적용된 박스에는 효과가 없습니다. 이들은 overflow clip edge를 사용하지 않습니다.

3.3. 오버플로우 뷰포트 전파

UA는 루트 요소에 설정된 overflow-* 값을, 루트 요소의 display 값이 none이 아닐 때 뷰포트에 적용해야 합니다.

단, 루트 요소가 [HTML] html 요소(HTML의 XML 문법 포함)이고, overflow 값이 양 축 모두 visible이며, 자식에 body 요소가 있고 그 display 값도 none이 아니라면, UA는 해당 자식의 overflow-* 값을 뷰포트에 적용해야 합니다. 이때 값이 전파된 요소의 사용된 overflow 값은 visible이어야 합니다.

참고: HTML html 또는 body 요소에 containment를 사용하면, body 요소에 대한 이 특수 처리가 비활성화됩니다. 자세한 내용은 CSS Containment 1 § 2 강한 컨테인먼트: contain 속성을 참고하세요.

참고: 루트 요소에 overflow: hidden을 적용해도, 초기 포함 블록(ICB)이 뷰포트보다 작으면 뷰포트 밖의 모든 것을 클리핑하지 않을 수 있습니다(모바일에서 발생 가능).

뷰포트에 visible이 적용되면 auto로 해석해야 하며, clip이 적용되면 hidden으로 해석해야 합니다.

3.4. 부드러운 스크롤: scroll-behavior 속성

scroll-behavior 속성은 스크롤 컨테이너에서 내비게이션, [CSSOM-VIEW] 스크롤 API, 또는 사용자에 의해 시작되지 않은 [CSS-SCROLL-SNAP-1] 스크롤 스냅 동작에 대해 스크롤 동작을 지정합니다. 사용자가 직접 수행하는 스크롤에는 이 속성이 영향을 주지 않습니다. 루트 요소에 지정하면 뷰포트에 적용됩니다.

참고: HTML body 요소의 scroll-behavior 속성은 뷰포트에 전파되지 않습니다.

auto

스크롤 컨테이너는 즉시 스크롤됩니다.

smooth

스크롤 컨테이너는 부드럽게 스크롤되며, UA가 정의한 타이밍 함수와 기간을 사용합니다. UA는 플랫폼 관례를 따라야 합니다(있는 경우).

UA는 이 속성을 무시할 수 있습니다.

4. 스크롤바와 레이아웃

4.1. 스크롤바가 크기 산정에 미치는 영향

요소 박스의 가장자리에 스크롤바 공간을 예약할 때, 이 공간은 내부 border edge와 외부 padding edge 사이에 삽입됩니다. background positioning area 및 background painting area의 관점에서는, 이 예약된 공간도 padding box의 일부로 간주됩니다.

<style>
          article {
            background: top right no-repeat url(circle.png);
            position: relative;
            overflow: auto; }
          aside { position: absolute; top: 0; right: 0; }
        </style>
        <article>
          <aside>×</aside>
        </article>
        

박스가 내재적으로 크기가 결정되는 경우, 이 예약 공간은 콘텐츠 크기에 더해집니다. 그렇지 않으면 content area에 할당된 공간에서 빼게 됩니다. 스크롤바의 존재가 크기 산정에 영향을 줄 수 있으므로, UA는 처음에는 스크롤바가 필요 없다고 가정하고, 실제로 필요하면 크기를 다시 계산해야 합니다.

...
            article { overflow: auto; max-height: 5em;  width: max-content; }
            section { margin: 2em; line-height: 1 }
        ...
        <article>
          <section>
            This section has big margins.
          </section>
        </article>
        

4.2. 스크롤바 공간 예약: scrollbar-gutter 속성

UA가 스크롤바를 표시하기 위해 내부 border edge와 외부 padding edge 사이에 예약할 수 있는 공간을 scrollbar gutter라 합니다.

scrollbar-gutter 속성은 작성자가 scrollbar gutter의 존재를 직접 제어할 수 있게 하며, overflow 속성으로 스크롤바 자체의 존재를 제어하는 것과는 별개입니다.

이 속성은 박스의 scrollbar gutter가 inline start 또는 inline end에 배치되는지에 영향을 줍니다.

scrollbar gutter가 block start 또는 block end에 배치되는지는 이 레벨에서는 제어할 수 없으며, scrollbar-gutter가 auto일 때와 동일하게 결정됩니다.

기본적으로 콘텐츠 박스 위에 배치되어 scrollbar gutter를 생성하지 않는 스크롤바를 오버레이 스크롤바라 하며, 보통 반투명으로 콘텐츠가 보입니다. 사용자 상호작용 여부에 따라 모양과 크기가 달라질 수 있습니다.

항상 scrollbar gutter에 배치되어 공간을 차지하는 스크롤바를 클래식 스크롤바라 하며, 보통 불투명합니다.

클래식 스크롤바와 오버레이 스크롤바 중 어떤 것이 사용되는지, 스크롤바의 모양과 크기, 어느 쪽에 나타나는지는 UA가 결정합니다.

참고: 스크롤바가 어느 쪽에 나타나는지는 운영체제 관례, 양방향성, 기타 인체공학적 고려에 따라 달라질 수 있습니다.

클래식 스크롤바의 경우, scrollbar gutter의 너비(존재할 때)는 스크롤바의 너비와 동일합니다. 오버레이 스크롤바의 경우 scrollbar gutter가 없습니다.

참고: 오버레이 스크롤바에도 scrollbar gutter를 적용해야 하는 요구가 있지만, 아직 만족스러운 설계가 합의되지 않았습니다. 향후 속성 확장으로 해결될 수 있습니다. CSS Overflow 4 § B scrollbar-gutter 확장 가능성 참고.

이 속성의 값 의미는 다음과 같습니다:

auto

클래식 스크롤바는 overflow가 scroll이거나, overflow가 auto이고 박스가 오버플로우될 때 scrollbar gutter 공간을 차지합니다. 오버레이 스크롤바는 공간을 차지하지 않습니다.

stable

클래식 스크롤바는 overflow가 hidden, scroll, auto일 때, 박스가 실제로 오버플로우되는지와 관계없이 scrollbar gutter 공간을 항상 차지합니다. 오버레이 스크롤바는 공간을 차지하지 않습니다.

참고: 이 값은 스크롤바 자체의 표시 여부를 바꾸지 않고, gutter 공간의 존재만 제어합니다.

both-edges

박스의 inline start 또는 inline end에 scrollbar gutter가 존재하면, 반대쪽에도 scrollbar gutter를 추가해야 합니다.

scrollbar gutter는 스크롤바가 없거나, 스크롤바가 투명하거나 완전히 gutter를 가리지 않을 때, padding의 확장처럼 배경이 칠해져야 합니다.

overflow 속성과 마찬가지로, scrollbar-gutter가 루트 요소에 지정되면 UA는 뷰포트에 적용해야 하며, 루트 요소의 사용값은 scrollbar-gutter: auto가 됩니다. 단, overflow 속성과 달리, UA는 HTML body 요소에서 scrollbar-gutter를 전파하면 안 됩니다.

5. 자동 생략부호

5.1. 오버플로우 생략부호: text-overflow 속성

이 속성은 인라인 콘텐츠가 블록 컨테이너 요소("블록")의 인라인 진행 방향 끝 end 라인 박스 엣지를 넘칠 때, overflow가 visible이 아닌 경우의 렌더링을 지정합니다.

텍스트는 줄바꿈이 방지되거나(white-space: nowrap 등) 단어가 너무 길어 맞지 않을 때 오버플로우될 수 있습니다. 값의 의미는 다음과 같습니다:

clip

블록 컨테이너를 넘치는 인라인 콘텐츠를 잘라냅니다. 문자가 부분적으로만 렌더링될 수 있습니다.

ellipsis

잘린 인라인 콘텐츠를 나타내기 위해 생략부호(U+2026) 문자를 렌더링합니다. 구현체는 언어, 스크립트, 쓰기 모드에 더 적합한 생략부호 문자나, 생략부호 문자가 없을 경우 "..."(점 3개)로 대체할 수 있습니다.

이 속성 정의에서 "문자"라는 용어는 가독성을 위해 사용되며, 실제 구현에서는 "그래프 클러스터" [UAX29]를 의미합니다.

ellipsis 값의 경우, 구현체는 라인의 원자적 인라인 레벨 요소와 문자를 생략부호가 들어갈 수 있도록 end 엣지에서 숨겨야 하며, 생략부호는 남은 인라인 콘텐츠의 end 엣지에 바로 붙여 배치해야 합니다. 한 줄의 첫 번째 문자나 원자적 인라인 레벨 요소는 생략부호 대신 잘라내야 합니다.

div {
          font-family: monospace;
          white-space: pre;
          overflow: hidden;
          width: 9ch;
          text-overflow: ellipsis;
        }
        

생략부호 처리 세부사항

• 생략부호는 렌더링에만 영향을 주며, 레이아웃이나 포인터 이벤트 디스패치에는 영향을 주지 않아야 합니다: UA는 생략부호에 대한 포인터 이벤트를 생략된 요소에 디스패치해야 하며, text-overflow가 none인 것처럼 처리해야 합니다.
• 생략부호는 블록에 따라 스타일링되고 베이스라인 정렬됩니다.
• 생략부호는 상대 위치 지정 및 기타 그래픽 변환 이후에 적용됩니다.
• 생략부호를 위한 공간이 충분하지 않으면, 생략부호 자체의 렌더링을 잘라내야 하며 (해당 라인에서 중립 문자가 text-overflow:clip 값으로 잘렸을 쪽과 동일한 쪽에서).

생략부호와 사용자 상호작용

• 사용자가 콘텐츠와 상호작용할 때 (예: 편집, 선택, 스크롤), UA는 text-overflow: ellipsis를 text-overflow: clip처럼 처리할 수 있습니다.
• 생략부호를 선택하면 생략된 텍스트가 선택되어야 합니다. 생략된 텍스트 전체가 선택되면, UA는 생략부호의 선택을 보여야 합니다. 부분적으로 선택된 생략 텍스트의 동작은 UA에 따라 다릅니다.

div {
          font-family:Helvetica,sans-serif; line-height:1.1;
          width:3.1em; padding:.2em; border:solid .1em black; margin:1em 0;
        }
        

<div>
        CSS IS AWESOME, YES
        </div>
        

<div style="text-overflow:clip; overflow:hidden">
        CSS IS AWESOME, YES
        </div>
        

<div style="text-overflow:ellipsis; overflow:hidden">
        CSS IS AWESOME, YES
        </div>
        

<div style="text-overflow:ellipsis; overflow:hidden">
        NESTED
         <p>PARAGRAPH</p>
        WON’T ELLIPSE.
        </div>
        

참고: 생략부호가 배치되는 라인 쪽은 블록의 direction에 따라 달라집니다. 예를 들어, overflow hidden인 오른쪽-왼쪽(direction: rtl) 블록은 인라인 콘텐츠를 왼쪽에서 잘라내므로, 잘린 콘텐츠를 나타내기 위해 왼쪽에 생략부호가 표시됩니다.

생략부호와 스크롤 인터페이스의 상호작용

이 절은 text-overflow:clip이 아닌(non-clip text-overflow) 요소와 overflow:scroll에 적용됩니다.

non-clip text-overflow가 설정된 요소가 텍스트의 인라인 진행 방향에 대해 overflow:scroll을 갖고, 브라우저가 스크롤바나 터치 스와이프 등 스크롤 메커니즘을 제공하는 경우, 더 나은 사용자 경험을 위한 추가 구현 세부사항이 있습니다:

요소가 스크롤될 때(사용자 또는 DOM 조작 등), 더 많은 콘텐츠가 표시됩니다. text-overflow 값은 더 많은 콘텐츠가 표시되는지에 영향을 주지 않아야 합니다. non-clip text-overflow가 설정된 경우, 더 많은 콘텐츠가 뷰에 들어오면 구현체는 들어오는 추가 콘텐츠를 보여주고, 생략부호/문자열을 위한 공간이 필요할 때만 콘텐츠를 잘라내야 하며, 요소가 충분히 스크롤되어 콘텐츠의 엣지가 보이면 생략부호 대신 해당 콘텐츠를 보여야 합니다.

div.crawlbar {
          text-overflow: ellipsis;
          height: 2em;
          overflow: scroll;
          white-space: nowrap;
          width: 15em;
          border:1em solid black;
        }
        

<div class="crawlbar">
        CSS is awesome, especially when you can scroll
        to see extra text instead of just
        having it overlap other text by default.
        </div>
        

콘텐츠가 스크롤되는 동안, 구현체는 생략부호의 렌더링을 조정할 수 있습니다(예: 라인 엣지 대신 박스 엣지에 정렬).

부록 A. 개인정보 보호 고려사항

이 명세는 새로운 개인정보 보호 문제를 도입하지 않습니다.

부록 B. 보안 고려사항

이 명세는 새로운 보안 문제를 도입하지 않습니다.

부록 C. 변경사항

이 부록은 참고용입니다.

2021-12-02 워킹 드래프트 이후 변경사항 2021-12-02 Working Draft

• 끝 엣지 padding을 scrollable overflow area에 포함하도록 요구함(block containers의 경우); 이전에는 block containers에서 normal content distribution일 때 선택적이었으며, 웹 호환성 조사가 진행 중이었습니다. (이슈 129)

• -webkit-line-clamp와 다양한 line-clamp 롱핸드의 상호작용을 더 정확히 정의함. CSS Overflow 4 § 5.1.1 레거시 호환성 참고. (이슈 6842)

• region breaks가 continue: discard에서 이후 콘텐츠를 버리게 하는 트리거임을 명확히 함(다른 종류의 break는 해당되지 않음); 해당 박스에서 region break를 트리거하는 예시도 추가함.

• 기타 소규모 명확화:

  • <length-percentage> 값 정의에 CSS bracketed range notation을 주석으로 추가함.

2020-06-03 워킹 드래프트 이후 변경사항 2020-06-03 Working Draft

• scroll-behavior 속성을 [CSSOM-VIEW]에서 본 명세로 이동함.

• 이전에는 scrollbar-gutter 속성이 [CSS-OVERFLOW-4]에 정의되어 있었으나, 본 명세로 채택함.

• overflow-clip-margin에 박스 엣지 키워드를 추가함. (이슈 5801)

• border-radius와 overflow-clip-margin의 상호작용을 명확히 함.

• 사용자 스크롤 제스처와 변환(transform) 관련 참고 추가.

• 마진, 패딩, 0영역 박스를 scrollable overflow area에 포함하는 요구사항을 강화함. (이슈 129, 이슈 4791)

• 스크롤바가 레이아웃에 미치는 영향에 대해 더 정확히 정의함. (이슈 3348)

• overflow의 뷰포트 전파 관련 다양한 엣지 케이스 처리. (이슈 3779, 이슈 5913)

• 기타 소규모 명확화 및 수정.

2018-07-31 워킹 드래프트 이후 변경사항 2018-07-31 Working Draft

• 마크업 오류 및 오타 수정

• 여러 편집적 명확화 및 불일치 수정

• block-overflow를 block-ellipsis로 이름 변경

• text-overflow가 오버플로우된 block overflow ellipsis에 영향을 주도록 정의

• 라인보다 긴 block overflow ellipsis의 동작 정의

• block-ellipsis와 ::first-line / ::first-letter의 상호작용 정의

• continue: discard가 적용된 요소의 내재 크기 조정

• block overflow ellipsis의 레이아웃 방법 정의

• 기존 콘텐츠와의 호환성을 위해 -webkit-line-clamp의 레거시 동작 정의

• 끝 패딩이 scrollable overflow area에 포함됨을 정의(단, block containers는 웹 호환성 문제로 예외)

• flex 및 grid 아이템의 마진이 scrollable overflow에 포함됨을 정의

• boxless 요소에서 overflow 전파하지 않도록 정의

• 'scrollable overflow region'을 'scrollable overflow area'로 이름 변경

• overflow-clip-margin 속성 도입

2018-07-31 워킹 드래프트 이전 변경사항 2018-07-31 Working Draft

2018-07-31 워킹 드래프트 이전의 변경사항은 다음 변경 로그에서 확인할 수 있습니다:

• 2017-08-02 ~ 2018-07-31

• 2015-01-27 ~ 2017-08-01

• 2013-03-28 ~ 2015-01-27

• 2012-07-31 ~ 2013-03-27

감사의 글

특히 아래 분들의 피드백에 감사드립니다: Rossen Atanassov, Bert Bos, Tantek Çelik, John Daggett, Daniel Glazman, Vincent Hardy, Håkon Wium Lie, Peter Linss, Robert O’Callahan, Florian Rivoal, Alan Stearns, Steve Zilles, 그리고 www-style 커뮤니티의 모든 분들.