Làm thế nào tôi có thể buộc overflow: hidden để không sử dụng hết không gian padding-phải của tôi

Question

Tôi đã đoạn mã sau:

<div style="width: 100px; 
overflow: hidden; 
border: 1px solid red; 
background-color: #c0c0c0; 
padding-right: 20px; 
"> 
2222222222222222222222111111111111111111111111113333333333333333333</div> 

(XHTML 1.0 chuyển tiếp)

gì xảy ra là padding-right doesn 't xuất hiện, nó chiếm bởi nội dung, có nghĩa là tràn sử dụng lên không gian bên phải padding và chỉ "cắt giảm" sau khi padding.

Có cách nào để buộc trình duyệt tràn trước phần đệm phải không, điều đó có nghĩa là div của tôi sẽ hiển thị với phần đệm phải không?

div đầu tiên trong hình dưới đây Những gì tôi nhận được là, những gì tôi muốn là một cái gì đó giống như div 2:

image

Answer 1

Tôi có cùng vấn đề với tràn: bị ẩn; tuân theo tất cả các quy tắc đệm, ngoại trừ phía bên tay phải. Giải pháp này hoạt động cho các trình duyệt hỗ trợ độ mờ độc lập.

Tôi chỉ thay đổi CSS của tôi từ:

padding: 20px; 
overflow: hidden; 

để

padding: 20px 0 20px 20px; 
border-right: solid 20px rgba(0, 0, 0, 0); 

Có div chứa hoạt động tốt, nhưng điều đó một cách hiệu quả tăng gấp đôi số lượng các div trên một trang, mà cảm thấy không cần thiết.

Thật không may, trong trường hợp của bạn, điều này sẽ không hoạt động tốt, vì bạn cần một đường viền thực trên div.

Answer 2

Tốt nhất là sử dụng một gói div và thiết lập padding trên đó .

Answer 3

Tôi gặp sự cố tương tự mà tôi đã giải quyết bằng cách sử dụng clip thay vì overflow. Điều này cho phép bạn chỉ định kích thước hình chữ nhật của khu vực hiển thị của div của bạn (W3C Recommendation). Trong trường hợp này, bạn chỉ nên chỉ định vùng trong vùng đệm để hiển thị.

Đây có thể không phải là giải pháp hoàn hảo cho trường hợp chính xác này: vì đường viền của div nằm ngoài vùng cắt, điều này cũng sẽ trở nên vô hình. Tôi nhận được xung quanh đó bằng cách thêm một div bao bọc và thiết lập đường viền trên đó, nhưng vì div bên trong phải được đặt hoàn toàn cho clip để áp dụng, bạn sẽ cần biết và chỉ định chiều cao trên div của trình bao bọc.

<div style="border: 1px solid red; 
    height: 40px;"> 
    <div style="position: absolute; 
     width: 100px; 
     background-color: #c0c0c0; 
     padding-right: 20px; 
     clip: rect(auto, 80px, auto, auto);"> 
     2222222222222222222222111111111111111111111111113333333333333333333</div> 
</div> 

Answer 4

Nếu bạn có phần tử liền kề bên phải với phần tử được đề cập, hãy đặt đệm bên trái. Bằng cách đó, nội dung từ phần tử bên trái sẽ chảy lên nhưng không vượt quá lề của nó, và phần đệm trái trên phần tử liền kề bên phải sẽ tạo ra sự tách rời mong muốn. Bạn có thể sử dụng thủ thuật này cho một loạt các phần tử nằm ngang có thể có nội dung cần được cắt bỏ vì quá dài.

Answer 5

Bó div và áp dụng padding để phụ huynh

.c1 { 
 
    width: 200px; 
 
    border: 1px solid red; 
 
    background-color: #c0c0c0; 
 
    padding-right: 50px; 
 
} 
 
.c1 > .c1-inner { 
 
    overflow: hidden; 
 
}

<div class="c1"> 
 
    <div class="c1-inner">2222222222222222222222111111111111111111111111113333333333333333333 
 
    </div> 
 
</div>