Kiểm soát cắt bớt nội dung tràn

Tính năng web: overflow: clip overflow-clip-margin

Mặc dù overflow: hidden là một "công cụ thô sơ" hầu như luôn cắt nội dung một cách nghiêm ngặt tại hộp khoảng đệm, nhưng overflow: clip kết hợp với overflow-clip-margin sẽ cung cấp "dao mổ" để kiểm soát bố cục chi tiết trên các vùng chứa khối.

Chỉ định chính xác vị trí cắt bằng overflow: clip và overflow-clip-margin. Bạn có thể căn chỉnh ranh giới chính xác với các cạnh mô hình hộp bên trong hoặc mở rộng ranh giới cắt ra ngoài hộp của phần tử theo một độ lệch được chỉ định (biên độ an toàn). Phương pháp hiện đại này có hiệu suất cao và loại bỏ yêu cầu cũ về việc thêm các vùng chứa trình bao bọc bổ sung có khoảng đệm tuỳ chỉnh và lề âm chỉ để cho phép các hiệu ứng hình ảnh (như bóng phần tử con nổi bật) hiển thị mà không bị cắt bớt.

Các phần tử được thay thế (<img>, <video>, <canvas>, v.v.) mặc định là overflow: clip và overflow-clip-margin: content-box, giúp bạn kiểm soát để chứa hình ảnh sử dụng object-fit hoặc border-radius một cách rõ ràng.

Cách triển khai

  1. Áp dụng overflow: clip: Đảm bảo phần tử mục tiêu đã bật overflow: clip. Bạn bắt buộc phải đặt overflow: clip trên vùng chứa bố cục khối để overflow-clip-margin có hiệu lực. Nếu bạn đặt overflow thành hidden, auto hoặc scroll, thì trình duyệt sẽ bỏ qua thuộc tính overflow-clip-margin. overflow: clip ngăn chặn mọi thao tác cuộn (cả do người dùng thực hiện và có lập trình thông qua JavaScript).
  2. Căn chỉnh theo cạnh hộp: Sử dụng từ khoá để căn chỉnh chính xác ranh giới cắt theo các cạnh của mô hình hộp bên trong:
    • content-box: Cắt nội dung chính xác tại nơi vùng nội dung bắt đầu, để lại vùng khoảng đệm hoàn toàn trống. Nội dung dừng ngay tại cạnh của khoảng đệm. Rất phù hợp với các mô-đun bố cục lồng nhau.
    • padding-box (Mặc định): Cắt nội dung ở cạnh trong của đường viền.
    • border-box: Cắt nội dung ở cạnh ngoài của đường viền, cho phép nội dung nằm dưới hoặc chồng lên một phần đường viền mờ.
  3. Xác định độ lệch cụ thể (Phần lề): Cung cấp giá trị độ dài (ví dụ: 15px hoặc 5px) để tạo vùng an toàn trước khi cắt pixel. Điều này cho phép các bóng phần tử con nổi bật hiển thị mà không bị cắt bớt qua cạnh ranh giới mà không cần mở rộng hình học bố cục.
  4. Kết hợp Box-Edge và Offset: Chỉ định đồng thời cả cạnh hộp và độ lệch chiều dài (ví dụ: content-box 15px) để bù trừ từ một cạnh hộp cụ thể.

Mã ví dụ

Các ví dụ sau đây minh hoạ các chế độ kiểm soát bố cục vùng chứa động, cho thấy khung lồng nhau của đường cong nội dung bên trong tự động và tính năng bảo vệ bóng của phần tử con cùng với các phương án dự phòng cải tiến tăng dần.

Vùng chứa khối: Đường cong bo tròn lồng nhau

  • Áp dụng overflow-clip-margin: content-box cho vùng chứa mẹ có các góc bo tròn và khoảng đệm tuỳ chỉnh.
  • Áp dụng các góc bo tròn tương tự trên các thành phần chân trang và nội dung nghe nhìn con bên trong dọc theo ranh giới hộp nội dung bên trong đồng tâm, giải quyết các đường cong lồng ghép khó xử mà không cần logic calc() tuỳ chỉnh.
<div class="nested-curve-parent">
  <img src="avatar.jpg" alt="Nested Curve Demo">
  <div class="nested-curve-footer">Card Footer</div>
</div>

/**
 * Standard block layout container with outer corner radii and padding.
 * Keeps base level 1 fallback clipping roughly at the inner padding box.
 */
.nested-curve-parent {
  /* Level 1 Fallback: clips child roughly at the padding box */
  overflow: hidden;
}

/* Inner footer component with 12px rounded to visually demonstrate automatic concentric corner clipping */
.nested-curve-footer {
  background: #111;
  color: #fff;
}

@supports (overflow-clip-margin: content-box) {
  .nested-curve-parent {
    /* MANDATORY: overflow: clip is required on non-replaced elements */
    overflow: clip;
    /* Automatically curves clipping edge to match inner content-box radius */
    overflow-clip-margin: content-box;
  }
}

Vùng chứa khối: Bóng của phần tử con bị tràn ra ngoài

  • Áp dụng overflow: clip và xác định độ lệch chiều dài overflow-clip-margin mở rộng để tạo vùng an toàn hiển thị, cho phép bóng của phần tử con hiển thị mà không bị cắt bớt bên ngoài vùng chứa mẹ mà không làm thay đổi hình dạng bố cục. Nếu không có thuộc tính này, bóng của thành phần con sẽ bị cắt bớt ở ranh giới của thành phần mẹ.
<div class="safety-zone-parent">
  <h4>Clipped Container</h4>
  <p>Inner content boundaries safely contained.</p>
  <!-- Child button element positioned inside with a prominent shadow -->
  <button class="demo-glowing-btn">Submit</button>
</div>

/**
 * Standard block layout container clipping inner content.
 * Base fallback uses overflow: hidden, which abruptly slices child element shadows.
 */
.safety-zone-parent {
  /* Level 1 Fallback: clips overflowing content but truncates child shadows */
  overflow: hidden;
}

/* Child button element positioned inside with an expanded shadow */
.demo-glowing-btn {
  display: block;
  box-shadow: 0 8px 13px rgba(229, 46, 113, 0.7);
}

@supports (overflow-clip-margin: 15px) {
  .safety-zone-parent {
    overflow: clip;
    /* Establishes a visible safety zone allowing child element shadows to render safely outside */
    overflow-clip-margin: 15px;
  }
}

Triển khai chiến lược và các phương pháp hay nhất

  • NÊN áp dụng overflow: clip cho các phần tử mục tiêu khi sử dụng overflow-clip-margin, vì việc đặt overflow thành clip là bắt buộc trên các vùng chứa bố cục khối tiêu chuẩn để kích hoạt lề cắt cong bên trong hoặc tuỳ chỉnh.
  • NÊN đặt overflow-clip-margin: content-box trên các vùng chứa có khoảng đệm và góc bo tròn để tự động cắt các phần tử con bên trong không bo tròn thành các đường cong đường viền lồng nhau hoàn hảo về mặt toán học mà không cần logic trừ khoảng đệm thủ công.
  • NÊN định cấu hình overflow-clip-margin với độ lệch chiều dài được chỉ định khi áp dụng hiệu ứng hình ảnh bên ngoài (như filter: drop-shadow()) để ngăn chặn việc cắt bớt hộp giới hạn sắc nét mà không làm thay đổi hoặc mở rộng hình dạng bố cục.
  • KHÔNG áp dụng overflow: clip nếu vùng chứa yêu cầu thao tác cuộn có lập trình thông qua JavaScript hoặc đóng vai trò là bối cảnh bố cục tức thì cho các phần tử position: sticky, vì clip sẽ tắt hoàn toàn tính năng cuộn.

Chiến lược dự phòng

Đối với những môi trường mục tiêu thiếu tính năng hỗ trợ gốc cho overflow: clip hoặc overflow-clip-margin, chiến lược dự phòng cải tiến tăng dần phụ thuộc trực tiếp vào ý định hình ảnh:

  • Dự phòng cho overflow: hidden làm trải nghiệm cơ bản để đảm bảo duy trì các ranh giới cốt lõi.
  • Dự phòng cho overflow: visible trên các phần tử không được cắt bớt bóng đổ hoặc huy hiệu góc bên ngoài.

Hoàn tất việc triển khai phương án dự phòng cho chiến lược Cải tiến tăng dần

<!-- 1. Nested rounded edges fallback -->
<div class="demo-container-fallback">
  <img src="example.jpg" alt="Nested Curve Fallback">
  <div class="demo-footer-fallback">Footer</div>
</div>

<!-- 2. Child element shadow bleed fallback -->
<div class="demo-safety-parent">
  <h4>Container</h4>
  <p>Inner boundaries contained.</p>
  <button class="demo-glowing-btn">Submit</button>
</div>

/**
 * 1. Block Container Nested Curves Fallback
 * Keeps base level 1 fallback clipping roughly at the inner padding box.
 */
.demo-container-fallback {  
  /* Level 1 Fallback: clip child roughly at padding box */
  overflow: hidden;
}

.demo-container-fallback img {
  object-fit: cover;
  display: block;
}

@supports (overflow-clip-margin: content-box) {
  .demo-container-fallback {
    overflow: clip;
    overflow-clip-margin: content-box;
  }
}

/**
 * 2. Child Element Shadow Bleed Fallback
 * Base fallback clips content using overflow: hidden, abruptly truncating child element shadows.
 */
.demo-safety-parent {  
  /* Level 1 Fallback */
  overflow: hidden;
}

.demo-glowing-btn {
  display: block;
  width: 100%;
  padding: 6px 12px;
  background: #e52e71;
  box-shadow: 0 8px 13px rgba(229, 46, 113, 0.65);
}

@supports (overflow-clip-margin: 15px) {
  .demo-safety-parent {
    overflow: clip;
    overflow-clip-margin: 15px;
  }
}