Chrome 130의box-decoration-break 속성

Rachel Andrew

게시일: 2024년 10월 11일

Chrome 130에서는 box-decoration-break 값이 clone인 CSS 속성 사용할 수 있게 되면 인라인 및 블록 단편화를 지원합니다. 이 게시물에서는 이 기능을 사용하는 이유와 방법을 설명합니다.

인라인 단편화

인라인 단편화는 인라인 요소(예: 텍스트 문자열)가 여러 줄에 걸쳐 줄바꿈될 때 발생합니다. 인라인 요소에는 보통은 신경 쓰지 않아도 됩니다 추가할 수 있습니다. 다음 예시에서는 border-radius가 있는 스팬이 스팬에 추가됩니다. 테두리는 문자열의 시작과 끝에서만 곡선이 됩니다.

span {
  background-color: #002856;
  color: #fff;
  border-radius: 0.5em;
  border: 2px solid black;
}

래핑된 위치에서 배경이 잘린 래핑된 텍스트 줄

box-decoration-break의 초깃값은 slice이며 슬라이스를 제공합니다. 영향을 미치지 않습니다. 하지만 새로 지원되는 box-decoration-break: clone는 각 선이 둥근 테두리로 시작하고 끝난다는 의미입니다.

span {
  background-color: #002856;
  color: #fff;
  border-radius: 0.5em;
  border: 2px solid black;
  box-decoration-break: clone;
}

래핑된 텍스트 줄과 래핑된 부분의 모서리가 둥근 배경

<ph type="x-smartling-placeholder">

블록 단편화

블록 분할은 여러 열 레이아웃을 사용하는 경우 또는 인쇄 시 콘텐츠가 페이지로 분할되는 경우

다음 예에서는 콘텐츠가 열로 나뉘고 각 단락에 테두리가 있습니다. 초기 값이 slice인 경우 상자가 열의 맨 위와 맨 아래에서 자릅니다.

.columns {
  column-count: 5;
}

.columns p {
  border: 5px solid #34c9eb;
  padding: 0.5em;
}

슬라이스 상자가 있는 여러 열

box-decoration-break: clone를 사용하면 상자가 조각화될 때 각 조각이 테두리로 래핑됩니다.

.columns {
  column-count: 5;
}

.columns p {
  border: 5px solid #34c9eb;
  padding: 0.5em;
  box-decoration-break: clone;
}

복제된 상자가 있는 여러 열

<ph type="x-smartling-placeholder">

파편화된 상자에 테두리가 있는 경우에도 몇 가지 있습니다. 상자가 두 페이지로 분할된 경우 상자의 테두리는 첫 번째 페이지에서는 완료되고 두 번째 페이지에서는 새 상자가 열립니다.