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. 스크롤 가능한 오버플로우

박스의 스크롤 가능한 오버플로는 해당 박스의 패딩 에지 밖으로 확장되면서 스크롤 메커니즘이 제공되어야 하는 요소들의 집합입니다.

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

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

• 스크롤 컨테이너 자체의 패딩 박스.
• 라인 박스들 중 스크롤 컨테이너에 직접 포함된 것들.
• 모든 박스의 보더 박스 중, 해당 박스가 포함 블록(containing block)이며 그 보더 박스가 도달 불가능한 스크롤 가능한 오버플로 영역에 완전히 위치하지 않은 것. 변환(transform)에 대해서는 각 박스를 3D 렌더링 컨텍스트 평면에 투영하여 계산합니다. [CSS3-TRANSFORMS]

  변환 처리가 충분히 정확하게 설명되었나요?

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

• 그리드 아이템 및 플렉스 아이템 박스의 마진 영역, 단 박스가 포함 블록을 설정하는 경우에 한함.

  UA는 추가적으로 박스가 포함 블록을 설정하는 다른 박스의 마진 영역도 포함할 수 있지만, 그러한 마진 영역이 포함되는 조건은 이 레벨에서 정의되지 않습니다. 추가 테스트 및 조사가 필요하며, 따라서 이 초안에서는 연기됩니다.

• 위의 모든 박스(영역이 0인 박스와 변환 처리 포함)의 스크롤 가능한 오버플로 영역, 단 해당 박스의 overflow: visible일 때 (즉, 자체적으로 오버플로를 가두지 않을 때) 및 스크롤 가능한 오버플로가 이미 잘리지 않은 경우 (예: clip 속성 또는 contain 속성 등).

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

  어떤 것이 스크롤 가능한 오버플로를 잘라야 하는지/하지 말아야 하는지 평가 필요. [Issue #8607]

• 스크롤 가능한 오버플로 직사각형에 추가적으로 더해지는 패딩, 이는 place-content: start 및 place-content: end 정렬 요구 사항을 만족시키기 위해 필요한 스크롤 위치를 가능하게 합니다.

  참고: 이 패딩은 스크롤 가능한 오버플로 직사각형 내부에서 박스 자체의 패딩을 나타내며, 컨텐츠가 끝까지 스크롤될 때 콘텐츠의 인플로(in-flow, 또는 플로트된) 콘텐츠 에지와 박스의 보더 에지 사이에 패딩이 생기게 합니다. 일반적으로 박스 자체의 패딩 크기와 동일하지만, 드물게(예: out-of-flow 포지셔닝 요소나 자손의 보이는 오버플로가 이미 스크롤 가능한 오버플로 직사각형 크기를 개념적 "콘텐츠 에지" 밖으로 늘린 경우 등) 다를 수 있습니다. 스크롤 컨테이너의 콘텐츠 외부로 늘어난 경우에 해당합니다.

  

또한, 웹 호환성 제약으로 인해 (저자들이 레거시 버그를 이용해 시각적 읽기자에게 콘텐츠를 몰래 숨기고, 검색엔진이나 음성 출력에는 숨기지 않기 때문에), UA는 도달 불가능한 스크롤 가능한 오버플로 영역의 모든 콘텐츠를 잘라내야 합니다.

참고: content-distribution 속성은 도달 불가능한 스크롤 가능한 오버플로 영역을 변경하여, 스크롤 컨테이너의 정렬 대상이 정렬 후에 접근 가능하게 할 수 있습니다. [CSS-ALIGN-3]

참고: 스크롤 가능한 오버플로 직사각형은 박스의 좌표계에서는 항상 직사각형이지만, 변환에 따라 다른 좌표계에서는 비직사각형이 될 수 있습니다 [CSS3-TRANSFORMS]. 이는 실제로 필요하지 않은 경우에도 스크롤바가 나타날 수 있음을 의미합니다.

2.3. 스크롤 오버플로우

박스의 overflow는 보이거나 잘릴 수 있습니다. CSS는 또한 박스를 스크롤 컨테이너로 설정하여, 스크롤 가능한 오버플로 영역의 잘린 부분을 스크롤해서 볼 수 있도록 할 수 있습니다. 스크롤 컨테이너의 시각적 “뷰포트”는 (스크롤 가능한 오버플로 영역이 보여지는 영역) 패딩 박스와 일치하며, 스크롤포트라고 부릅니다. 박스의 가장 가까운 스크롤포트는 가장 가까운 스크롤 컨테이너 조상의 스크롤포트입니다.

스크롤 동작은 사용자가 (예를 들어, 스크롤바 조작, 터치스크린 스와이프, 키보드로 제어 등) 또는 스크립트로 (예: scrollIntoView() 또는 focus() API 등) 시작할 수 있습니다. 스크롤 가능한 오버플로 직사각형이 스크롤포트 내에서 최초로 위치하는 상태(아직 스크롤 동작이 실행되지 않은 상태)가 초기 스크롤 위치입니다. 초기 스크롤 위치는 일반적으로 스크롤 컨테이너의 쓰기 모드에 따라 결정되며, 별도의 명시가 없다면 스크롤 기준 위치와 일치합니다. 예를 들어, scroll-initial-target 속성을 사용해 초기 스크롤 위치를 변경할 수 있습니다. [CSS-SCROLL-SNAP-2]

스크롤 위치는 스크롤 가능한 오버플로 직사각형이 스크롤포트 내에서 특정하게 정렬된 상태를 말합니다. 이때 스크롤 오프셋이 함께 정의되는데, 이는 스크롤 기준점으로부터의 거리입니다.

스크롤 기준점은 스크롤 가능한 오버플로 직사각형의 기준 좌표(anchor coordinate)로, 여기서부터 스크롤 가능한 오버플로 직사각형이 확장됩니다. 별도의 명시가 없다면, block-start inline-start 코너가 스크롤 가능한 오버플로 직사각형의 기준점이 됩니다. (예를 들어, 플렉스 컨테이너에서는 main-start cross-start 코너가 해당됩니다.) 별도로 조정되지 않는 한 (예: content alignment [css-align-3] 등), 기준점(스크롤 기준점)을 넘는 축의 영역은 도달 불가능한 스크롤 가능한 오버플로 영역으로 간주됩니다: 여기에 렌더링된 콘텐츠는 사용자에게 접근 불가입니다. § 2.2 스크롤 가능한 오버플로를 참조하세요. 스크롤 컨테이너는 스크롤 기준점이 해당 스크롤포트의 해당 코너와 일치할 때 기준점까지 스크롤된 상태라고 합니다. 이 스크롤 위치, 즉 스크롤 기준 위치는 대개(항상 그런 것은 아님) 초기 스크롤 위치와 일치합니다.

baseline alignment와 같은 것이 초기 스크롤 위치 또는 스크롤 기준 위치에 의존하는지 확인 필요.

스크롤 오프셋에 대한 좌표계를 정의하지 않았음. 오프셋이 아래/오른쪽으로 증가하는지, 블록/인라인 축의 끝 방향으로 증가하는지, 스크롤 기준점에서 멀어지는 방향으로 증가하는지 등 정의되어 있지 않음. 각 API가 자체 좌표 모델을 정의해야 할까요?

페이지 캔버스를 스크롤하는 루트 뷰포트는 주된 쓰기 모드를 사용하여 스크롤 기준점과 초기 스크롤 위치를 결정합니다.

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

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

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

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

overflow-x 속성은 수평 축(즉, 박스의 왼쪽과 오른쪽에서 발생하는 오버플로)의 오버플로 처리 방법을 지정하며, overflow-y 속성은 수직 축(즉, 박스의 위쪽과 아래쪽에서 발생하는 오버플로) 처리 방법을 지정합니다.

overflow-block 및 overflow-inline 속성도 각각 오버플로의 블록 축과 인라인 축에서의 처리를 지정합니다.

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

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

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

visible

오버플로에 대한 특별한 처리가 없으며, 박스의 콘텐츠가 해당 위치에 있다면 박스 밖에 렌더링됩니다. 이 박스는 스크롤 컨테이너가 아닙니다.

hidden

이 값은 박스의 콘텐츠가 패딩 박스에 잘리고, UA가 잘린 영역 외의 콘텐츠를 볼 수 있도록 하는 스크롤 UI를 제공하지 않아야 함을 의미합니다. 또한 사용자가 직접적으로(터치 스크린 드래그, 마우스 휠 등) 스크롤할 수 없어야 합니다. 하지만 [CSSOM-VIEW]에서 정의된 메커니즘 등으로 프로그래밍적으로는 여전히 스크롤이 가능합니다. 따라서 이 박스는 스크롤 컨테이너입니다.

clip

이 값은 박스의 콘텐츠가 오버플로 클립 에지에 잘리고, UA가 잘린 영역 외의 콘텐츠를 볼 수 있도록 하는 스크롤 UI를 제공하지 않아야 함을 의미합니다. 또한 overflow: hidden이 프로그래밍적 스크롤을 허용하는 것과 달리, overflow: clip은 모든 방식의 스크롤을 금지하며, 따라서 이 박스는 스크롤 컨테이너가 아닙니다.

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

참고: 박스가 포맷팅 컨텍스트도 생성하기를 원하는 경우, display: flow-root와 overflow: clip을 함께 사용할 수 있습니다.

scroll

이 값은 콘텐츠가 패딩 박스에 잘리지만, 스크롤하여 볼 수 있음을 의미하며(따라서 이 박스는 스크롤 컨테이너입니다). 또한 UA가 화면에 보이는 스크롤 메커니즘(스크롤바, 패너 등)을 사용하는 경우, 콘텐츠가 잘렸는지 여부와 상관없이 해당 메커니즘을 항상 표시해야 합니다. 이는 동적 환경에서 스크롤바가 나타났다 사라지는 문제를 방지합니다. 출력 매체가 print인 경우, 넘치는 콘텐츠가 출력될 수 있으며, 어디에 출력될지는 정의되지 않습니다.

auto

박스에 스크롤 가능한 오버플로가 있을 때는 scroll과 같으며, 그렇지 않은 경우 hidden과 같습니다. 즉, UA가 화면에 보이는 스크롤 메커니즘(스크롤바, 패너 등)을 사용하는 경우, 오버플로가 있을 때만 해당 메커니즘이 표시됩니다.

scroll, auto, 그리고 hidden 값은 overflow의 스크롤 가능 값으로 알려져 있습니다. visible과 clip 값은 스크롤 불가 값으로 알려져 있습니다.

visible/clip 값이 overflow에 지정된 경우, auto/hidden으로(각각) 계산됩니다 만약 overflow-x 또는 overflow-y가 visible이나 clip이 아닌 경우입니다. 치환 요소에서는, 계산값이 hidden이면 사용값 clip으로 추가 해석됩니다.

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에 의해 설정된 클리핑 영역은 둥글게(rounded) 만들 수 있습니다:

• overflow-x와 overflow-y가 hidden, scroll, 또는 auto로 계산될 때, 클리핑 영역은 border-radius를 기반으로 padding edge에 맞게 조정되어 둥글게 처리됩니다. 자세한 내용은 CSS Backgrounds 3 § 4.2 코너 모양 만들기에서 설명합니다.

• overflow-x와 overflow-y가 모두 clip으로 계산될 때, 클리핑 영역은 § 3.2 Expanding Clipping Bounds: overflow-clip-margin 속성에서 설명한 대로 둥글게 처리됩니다.

• 하지만 overflow-x 또는 overflow-y 중 하나가 clip이고 다른 하나가 visible로 계산될 경우, 클리핑 영역은 둥글게 처리되지 않습니다.

3.1.3. 인쇄 및 기타 정적 매체에서의 오버플로

정적 매체(예: 인쇄)에서는 스크롤이 불가능하므로 저자들은 해당 매체에서 콘텐츠 접근성을 신경 써야 합니다. 예를 들어 @media print, (update: none) { … }와 같이 레이아웃을 조정해서 모든 관련 콘텐츠가 동시에 보이도록 할 수 있습니다.

스크롤 컨테이너가 비대화형 매체에서 overflow 값으로 auto 또는 scroll (단, hidden은 제외)일 때, UA는 스크롤 가능한 오버플로가 있음을 표시할 수 있습니다(예: 스크롤바, 생략 부호 등 표시).

참고: 모든 페이지 매체가 비대화형인 것은 아닙니다. 예를 들어, e북 리더는 콘텐츠를 페이지로 나누지만 대화형입니다.

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

이 속성은 박스의 오버플로 클립 에지를 정의합니다. 즉, 박스 경계 밖으로 콘텐츠가 얼마나 멀리 그려질 수 있는지, 그리고 overflow: clip과 같이 박스의 오버플로 클립 에지에 맞춰 잘라야 하는 효과에 의해 언제 잘릴지(클리핑될지)를 정밀하게 결정합니다.

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

<visual-box>

지정된 오프셋이 0일 때 오버플로 클립 에지의 기준이 될 박스 에지를 지정합니다.

생략시 padding-box가 기본값입니다.

<length [0,∞]>

지정된 오프셋은 오버플로 클립 에지가 지정된 박스 에지에서 얼마나 확장될지 결정합니다. 음수 값은 유효하지 않습니다. 생략 시 0이 기본값입니다.

오버플로 클립 에지는 코너에서 외부 박스-섀도우와 같은 방식으로 형성됩니다. 누적 오프셋(spread radius)이 박스의 border edge에서부터 동일한 거리로 확장된 경우와 동일합니다. 자세한 공식은 CSS Backgrounds 3 § 4.2 코너 모양 만들기와 CSS Backgrounds 3 § 6.1.1 섀도우 모양, 확장과 노크아웃을 참고하세요. 특히 border edge를 넘는 오프셋 공식에 주목하세요.

참고: 이 속성은 overflow: hidden이나 overflow: scroll인 박스에는 적용되지 않습니다. 이들은 오버플로 클립 에지를 사용하도록 정의되어 있지 않습니다.

3.3. 오버플로 뷰포트 전파

UA는 루트 요소의 overflow-* 값을, 루트 요소의 display 값이 none이 아닐 때, 뷰포트에 적용해야 합니다. 그러나, 루트 요소가 [HTML] html 요소일 때 (HTML의 XML 문법 포함) 이 요소의 overflow 값이 (두 축 모두) visible이고, 해당 요소의 자식으로 body 요소가 있으며 그 display 값도 none이 아닐 경우, UA는 대신 그 첫 번째 자식 요소의 overflow-* 값을 뷰포트에 적용해야 합니다. 값이 전파되는 요소는 사용된 overflow 값이 visible이어야 합니다.

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

참고: 루트 요소에 overflow: hidden을 설정하더라도, 초기 포함 블록이 뷰포트보다 작을 경우(모바일에서 발생 가능), 뷰포트 밖의 모든 것을 잘라내지 않을 수 있습니다.

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

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

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

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

auto

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

smooth

스크롤 컨테이너는 부드러운 방식으로 UA가 정의한 타이밍 함수와 시간 동안 스크롤됩니다. UA는 플랫폼 관례를 따라야 합니다(있는 경우).

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

4. 스크롤바와 레이아웃

4.1. 스크롤바가 사이즈에 미치는 영향

요소의 박스 에지에 스크롤바 공간을 예약할 때, 예약된 공간은 내부 보더 에지와 외부 패딩 에지 사이에 삽입됩니다. 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가 스크롤바를 표시하기 위해 예약할 수 있는 내부 보더 에지와 외부 패딩 에지 사이의 공간을 scrollbar gutter라고 합니다.

scrollbar-gutter 속성은 scrollbar gutter의 존재 여부를 저자가 제어할 수 있게 하며, overflow 속성이 제공하는 스크롤바 제어와는 별개로 동작합니다.

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

scrollbar gutter가 block start 에지와 block end 에지에 배치되는지 여부는 이 레벨에서는 제어할 수 없으며, scrollbar gutters가 박스의 inline start 에지 또는 inline end 에지에 배치될 때와 동일한 방식으로 결정됩니다 (단, scrollbar-gutter가 auto일 때).

기본적으로 콘텐츠 박스 위에 배치되어 scrollbar gutter를 생성하지 않는 스크롤바를 오버레이 스크롤바라고 합니다. 이러한 스크롤바는 대개 부분적으로 투명하여 뒤의 콘텐츠가 보입니다. 그 모양과 크기는 사용자의 상호작용 방식에 따라 달라질 수 있습니다.

항상 scrollbar gutter 내에 배치되어, 있을 때 공간을 차지하는 스크롤바를 클래식 스크롤바라고 합니다. 이러한 스크롤바는 대개 불투명합니다.

클래식 스크롤바 또는 오버레이 스크롤바 중 어떤 것이 사용되는지, 스크롤바의 모양과 크기, 그리고 박스의 시작 또는 끝 에지에 스크롤바가 나타나는지는 UA가 정의합니다.

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

클래식 스크롤바의 경우, scrollbar gutter의 너비는 (아래 참조) 스크롤바의 너비와 같습니다. 오버레이 스크롤바의 경우, scrollbar gutter가 없습니다.

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

이 속성의 값은 다음과 같은 의미를 가집니다:

auto

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

stable

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

참고: 이것은 스크롤바 자체가 보이는지 여부를 변경하지 않고, gutter의 존재 여부만 영향을 줍니다.

both-edges

박스의 인라인 시작 에지 또는 인라인 끝 에지에 scrollbar gutter가 존재한다면, 반대쪽에도 scrollbar gutter가 반드시 존재해야 합니다.

scrollbar gutter는 존재하지만 스크롤바가 없거나, 스크롤바가 투명하거나 gutter를 완전히 가리지 않는 경우, scrollbar gutter의 배경은 패딩 확장으로 그려져야 합니다.

overflow 속성처럼, scrollbar-gutter가 루트 요소에 설정되면, UA는 뷰포트에 적용해야 하며, 루트 요소 자체의 사용된 값은 scrollbar-gutter: auto입니다. 하지만 overflow와 달리 UA는 HTML body 요소에서 scrollbar-gutter를 전파하면 안 됩니다.

5. 자동 생략부호

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

이 속성은 인라인 콘텐츠가 블록 컨테이너 요소("the block")의 인라인 진행 방향으로 end 라인 박스 에지에 오버플로될 때 overflow가 visible이 아닌 경우에 렌더링을 지정합니다.

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

clip

블록 컨테이너 요소를 넘어서는 인라인 콘텐츠를 잘라냅니다. 문자가 일부만 렌더링될 수 있습니다.

ellipsis

잘린 인라인 콘텐츠를 표시하기 위해 줄임표 문자(U+2026)를 렌더링합니다. 구현체는 더 적합한 언어, 스크립트, 또는 쓰기 모드의 줄임표 문자나, 줄임표 문자가 없을 경우 "..." 세 점으로 대체할 수 있습니다.

이 속성 정의에서 "문자(character)"는 가독성을 위해 사용되며, 실제 구현에서는 "grapheme cluster" [UAX29]를 의미합니다.

ellipsis 값의 경우 구현체는 줄임표가 들어갈 수 있도록 atomic inline-level elements와 문자를 end 에지에서 숨겨야 하며, 줄임표는 남은 인라인 콘텐츠의 end 에지 바로 옆에 배치해야 합니다. 한 줄의 첫 번째 문자 또는 atomic inline-level element는 줄임표 대신 잘려야 합니다.

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

줄임표 세부사항

• 줄임표 처리(ellipsing)는 렌더링에만 영향을 미치며 레이아웃이나 포인터 이벤트 분배에는 영향을 주지 않아야 합니다: UA는 줄임표 위의 포인터 이벤트를 줄임 처리된(elided) 요소에 분배해야 하며, text-overflow가 none인 것처럼 동작해야 합니다.
• 줄임표는 블록에 따라 스타일링되고 베이스라인 정렬됩니다.
• 줄임 처리(ellipsing)는 상대 위치 지정 및 기타 그래픽 변환 이후에 발생합니다.
• 줄임표를 표시할 공간이 충분하지 않으면, 줄임표 자체의 렌더링도 잘립니다(해당 줄에서 중립 문자들이 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>

참고: 줄임표가 배치되는 줄의 쪽(side)은 블록의 direction에 따라 결정됩니다. 예를 들어, 오른쪽-왼쪽(direction: rtl) 블록에서 overflow hidden이면 인라인 콘텐츠가 왼쪽에서 잘리며, 이 경우 줄임표는 잘린 콘텐츠를 표시하기 위해 왼쪽에 배치됩니다.

줄임표와 스크롤 인터페이스 상호작용

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

비-clip text-overflow를 가진 요소가 텍스트의 인라인 진행 방향에서 overflow:scroll일 때, 그리고 브라우저가 스크롤 메커니즘(예: 요소에 스크롤바, 터치 스와이프 등)을 제공할 때, 더 나은 사용자 경험을 위해 추가 구현 세부사항이 있습니다:

요소가 스크롤되면(예: 사용자나 DOM 조작에 의해), 더 많은 콘텐츠가 표시됩니다. text-overflow 값은 더 많은 콘텐츠가 표시되는지 여부에 영향을 주지 않아야 합니다. 비-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. 변경사항

이 부록은 참고용입니다.

2023년 3월 29일 작업 초안 이후 주요 변경사항:

• overflow: hidden이 overflow: clip으로 치환되어 치환 요소에 적용됨을 정의. (이슈 7714)

• 오버플로되는 content distribution과 scroll containers의 상호작용을 레이아웃에 영향을 주지 않고 scrollable overflow area의 범위에만 영향을 주도록 재정의. (이슈 4957)

• 다른 명세에서 이 명세의 개념과 연결할 수 있도록 용어 일부를 추가 정의.

이전 변경사항도 참조하세요.

감사의 글

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