Tràn bản in JavaScript

Nó giúp chúng tôi kiểm soát điều gì sẽ xảy ra khi nội dung của một phần tử quá lớn để vừa với một khu vực. Khi điều này xảy ra, nội dung sẽ bị "tràn" sang một khu vực khác, theo chiều ngang (trục X) hoặc chiều dọc (trục Y)

Chúng tôi sẽ xem xét các giá trị sau của thuộc tính tràn và xem cách chúng hoạt động

• visible

• body{
      background: black;
  }
  
  div{
      height: 200px;
      width: 200px;
      background: white;
  }
  
  p{
      color: green;
  }

  0

• body{
      background: black;
  }
  
  div{
      height: 200px;
      width: 200px;
      background: white;
  }
  
  p{
      color: green;
  }

  1

• body{
      background: black;
  }
  
  div{
      height: 200px;
      width: 200px;
      background: white;
  }
  
  p{
      color: green;
  }

  2

Cách sử dụng giá trị visible

Đây là giá trị mặc định mà thuộc tính overflow nhận nếu không có giá trị nào được chỉ định. Với thuộc tính này, chúng ta có thể thấy rõ nội dung của mình khi nó tràn sang khu vực khác

Xem xét các ví dụ sau

      

        Lorem ipsum dolor sit amet consectetur adipisicing elit. Error quas
        repellendus reprehenderit libero labore dolor omnis! Obcaecati ipsam est
        accusantium quis quos minus veniam eaque? Modi expedita mollitia et qui!
      

body{
    background: black;
}

div{
    height: 200px;
    width: 200px;
    background: white;
}

p{
    color: green;
}

Cái này khá cơ bản. Chúng tôi đã cung cấp cho trang của mình một màu nền đen. Chúng tôi đặt màu nền của phần tử

body{
    background: black;
}

div{
    height: 200px;
    width: 200px;
    background: white;
}

p{
    color: green;
}

5 đóng vai trò là vùng chứa thành màu trắng. Nó có chiều cao và chiều rộng là 200px mỗi cái. Sau đó, chúng tôi làm cho văn bản của đoạn văn của chúng tôi có màu xanh lá cây

Đây là những gì nó trông giống như

Văn bản nằm thoải mái trong vùng chứa màu trắng mà không vượt qua đường viền của vùng chứa trên cả hai trục. Nhưng điều này không phải lúc nào cũng đúng

Bạn có thể đang làm việc trên một dự án và sau đó nhận ra rằng một đoạn văn bản vượt qua ranh giới. Một cái gì đó như thế này

      

        Lorem ipsum dolor sit amet consectetur adipisicing elit. Error quas
        repellendus reprehenderit libero labore dolor omnis! Obcaecati ipsam est
        accusantium quis quos minus veniam eaque? Modi expedita mollitia et qui!
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Error quas
        repellendus reprehenderit libero labore dolor omnis! Obcaecati ipsam est
        accusantium quis quos minus veniam eaque? Modi expedita mollitia et qui!
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Error quas
        repellendus reprehenderit libero labore dolor omnis! Obcaecati ipsam est
        accusantium quis quos minus veniam eaque? Modi expedita mollitia et qui!
      

Các kiểu CSS vẫn giữ nguyên. Bây giờ hãy xem điều gì đang xảy ra với vùng chứa và văn bản

Văn bản không thể vừa với vùng chứa màu trắng nên văn bản tràn ra ngoài và vượt qua đường viền của vùng chứa. Trong một dự án thực tế, điều này thậm chí còn khó chịu hơn vì bạn có văn bản này chồng lên các thành phần khác trên trang

Chúng tôi có thể thấy văn bản tràn vào một khu vực khác vì giá trị mặc định ở đây là visible mặc dù chúng tôi không chỉ định điều đó

Hãy tiếp tục và thêm nó vào CSS của chúng ta để bạn có thể thấy thuộc tính overflow đang được áp dụng

body{
    background: black;
}

div{
    height: 200px;
    width: 200px;
    background: white;
    overflow: visible;
}

p{
    color: green;
}

Chúng tôi đã thêm

body{
    background: black;
}

div{
    height: 200px;
    width: 200px;
    background: white;
}

p{
    color: green;
}

8 vào

body{
    background: black;
}

div{
    height: 200px;
    width: 200px;
    background: white;
}

p{
    color: green;
}

5. Kết quả vẫn như cũ – chúng ta sẽ thấy văn bản của mình tràn sang một khu vực khác

Trong phần sắp tới, chúng ta sẽ thấy các giá trị khác nhau có thể giúp chúng ta kiểm soát điều gì sẽ xảy ra khi tràn nội dung

Cách sử dụng giá trị body{ background: black; } div{ height: 200px; width: 200px; background: white; } p{ color: green; }0

Với giá trị

body{
    background: black;
}

div{
    height: 200px;
    width: 200px;
    background: white;
}

p{
    color: green;
}

0, phần văn bản bị tràn sẽ bị cắt bỏ – nó sẽ "ẩn". Bạn không phải lo lắng về dung lượng tràn đang chiếm. Khi nội dung đã được cắt bỏ, nó sẽ không còn ở khu vực tràn vào

Chúng ta sẽ xem xét một ví dụ trước khi nói về lý do tại sao đây không phải là giải pháp tốt nhất. Hãy thêm giá trị

body{
    background: black;
}

div{
    height: 200px;
    width: 200px;
    background: white;
}

p{
    color: green;
}

0

body{
    background: black;
}

div{
    height: 200px;
    width: 200px;
    background: white;
    overflow: hidden;
}

p{
    color: green;
}

Đây là những gì xảy ra với văn bản trong vùng chứa

Như bạn có thể thấy, chúng tôi không còn thấy phần văn bản đó vượt qua đường viền của vùng chứa

Điều này giải quyết vấn đề có nội dung ở khu vực không được phép có, nhưng nó không cung cấp cách truy cập nội dung đã bị cắt. Vì vậy, chúng tôi sẽ giải quyết vấn đề đó trong phần tiếp theo

Cách sử dụng giá trị body{ background: black; } div{ height: 200px; width: 200px; background: white; } p{ color: green; }1

Vì vậy, chúng tôi đã biết rằng giá trị

body{
    background: black;
}

div{
    height: 200px;
    width: 200px;
    background: white;
}

p{
    color: green;
}

0 cắt văn bản ra và ẩn nó. Nhưng giá trị

body{
    background: black;
}

div{
    height: 200px;
    width: 200px;
    background: white;
}

p{
    color: green;
}

1 cũng cắt văn bản và cung cấp thanh cuộn để chúng tôi có thể cuộn và xem phần văn bản đã bị cắt

Chúng ta hãy có một cái nhìn

body{
    background: black;
}

div{
    height: 200px;
    width: 200px;
    background: white;
    overflow: scroll;
}

p{
    color: green;
}

Bây giờ chúng ta có thanh cuộn trên cả hai trục. Thanh cuộn ngang không liên quan đến chúng tôi vì chúng tôi không có nội dung tràn theo hướng đó. Chúng tôi sẽ khắc phục điều này trong phần tiếp theo.

Cách sử dụng giá trị body{ background: black; } div{ height: 200px; width: 200px; background: white; } p{ color: green; }2

body{
    background: black;
}

div{
    height: 200px;
    width: 200px;
    background: white;
    overflow: auto;
}

p{
    color: green;
}

Bây giờ thanh cuộn chỉ xuất hiện theo chiều dọc. Giá trị

body{
    background: black;
}

div{
    height: 200px;
    width: 200px;
    background: white;
}

p{
    color: green;
}

2 phát hiện nơi tràn xảy ra và thêm một thanh cuộn theo hướng đó.

Không có thanh cuộn nào được thêm vào theo chiều ngang vì chúng tôi không có tràn nội dung trong trục đó. Tương tự, nếu chúng ta không có tràn trên cả hai trục, thì sẽ không có thanh cuộn nào được thêm vào

Thuộc tính

Lorem ipsum dolor sit amet consectetur adipisicing elit. Error quas repellendus reprehenderit libero labore dolor omnis! Obcaecati ipsam est accusantium quis quos minus veniam eaque? Modi expedita mollitia et qui! Lorem ipsum dolor sit amet consectetur adipisicing elit. Error quas repellendus reprehenderit libero labore dolor omnis! Obcaecati ipsam est accusantium quis quos minus veniam eaque? Modi expedita mollitia et qui! Lorem ipsum dolor sit amet consectetur adipisicing elit. Error quas repellendus reprehenderit libero labore dolor omnis! Obcaecati ipsam est accusantium quis quos minus veniam eaque? Modi expedita mollitia et qui!

8 và

Lorem ipsum dolor sit amet consectetur adipisicing elit. Error quas repellendus reprehenderit libero labore dolor omnis! Obcaecati ipsam est accusantium quis quos minus veniam eaque? Modi expedita mollitia et qui! Lorem ipsum dolor sit amet consectetur adipisicing elit. Error quas repellendus reprehenderit libero labore dolor omnis! Obcaecati ipsam est accusantium quis quos minus veniam eaque? Modi expedita mollitia et qui! Lorem ipsum dolor sit amet consectetur adipisicing elit. Error quas repellendus reprehenderit libero labore dolor omnis! Obcaecati ipsam est accusantium quis quos minus veniam eaque? Modi expedita mollitia et qui!

9

Trong các ví dụ chúng tôi đã sử dụng trong các phần trước, chúng tôi đã sử dụng thuộc tính overflow. Điều này áp dụng cho cả trục ngang và trục dọc. Nếu bạn muốn kiểm tra tràn một cách riêng biệt, bạn có thể sử dụng các

• 
        
  
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Error quas
          repellendus reprehenderit libero labore dolor omnis! Obcaecati ipsam est
          accusantium quis quos minus veniam eaque? Modi expedita mollitia et qui!
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Error quas
          repellendus reprehenderit libero labore dolor omnis! Obcaecati ipsam est
          accusantium quis quos minus veniam eaque? Modi expedita mollitia et qui!
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Error quas
          repellendus reprehenderit libero labore dolor omnis! Obcaecati ipsam est
          accusantium quis quos minus veniam eaque? Modi expedita mollitia et qui!
        
  

  8 chỉ định điều gì sẽ xảy ra khi nội dung tràn theo chiều ngang (từ trái sang phải).  

• 
        
  
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Error quas
          repellendus reprehenderit libero labore dolor omnis! Obcaecati ipsam est
          accusantium quis quos minus veniam eaque? Modi expedita mollitia et qui!
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Error quas
          repellendus reprehenderit libero labore dolor omnis! Obcaecati ipsam est
          accusantium quis quos minus veniam eaque? Modi expedita mollitia et qui!
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Error quas
          repellendus reprehenderit libero labore dolor omnis! Obcaecati ipsam est
          accusantium quis quos minus veniam eaque? Modi expedita mollitia et qui!
        
  

  9 chỉ định điều gì sẽ xảy ra khi nội dung tràn theo chiều dọc (từ trên xuống dưới).  

Các giá trị giống nhau – visible,

body{
    background: black;
}

div{
    height: 200px;
    width: 200px;
    background: white;
}

p{
    color: green;
}

0,

body{
    background: black;
}

div{
    height: 200px;
    width: 200px;
    background: white;
}

p{
    color: green;
}

1 và

body{
    background: black;
}

div{
    height: 200px;
    width: 200px;
    background: white;
}

p{
    color: green;
}

2 – cũng có thể được sử dụng ở đây

Một ví dụ nhanh

div {
  overflow-x: hidden; /* overflow is visible in x-axis */
  overflow-y: scroll; /* scrollbar is added when there is overflow in y-axis */
}

Phần kết luận

Trong hướng dẫn này, chúng tôi đã học cách kiểm soát tràn nội dung trên các trang của chúng tôi. Chúng tôi đã thấy các giá trị khác nhau mà chúng tôi có thể gán cho thuộc tính overflow và kết quả khác nhau mà các giá trị này tạo ra

Cuối cùng, chúng ta đã học cách áp dụng các giá trị của thuộc tính overflow chỉ theo hướng ngang hoặc dọc

mã hóa hạnh phúc

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

---

Ihechikara Vincent Abba

Tiểu sử của tác giả này có thể được tìm thấy trong các bài viết của ông

---

Nếu bạn đọc đến đây, hãy tweet cho tác giả để cho họ thấy bạn quan tâm. Tweet một lời cảm ơn

Học cách viết mã miễn phí. Chương trình giảng dạy mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu