Hướng dẫn clamp css-tricks - kẹp css-thủ thuật

DigitalOcean cung cấp các sản phẩm đám mây cho mọi giai đoạn của hành trình của bạn. Bắt đầu với $ 200 trong tín dụng miễn phí!

Video hay từ Kevin Powell. Dưới đây là một số ghi chú, suy nghĩ và những thứ tôi đã học được khi xem nó. Ngay khi chúng xuất hiện, tôi chủ yếu bị ám ảnh bởi việc sử dụng

.line-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;  
  overflow: hidden;
}

Đôi khi việc sử dụng khá cơ bản cho phép mã chặt chẽ hơn, nhưng sự thay đổi để có được đó cảm thấy hơi khó chịu. Giống như cách thiết lập một mức tối đa ở đây, bạn thực sự sử dụng

.line-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;  
  overflow: hidden;
}

.el {
  width: 75%;
  max-width: 600px;

  /* tighter, but the change from max to min feels weird */
  width: min(75%, 600px);
}

Các hàm

.line-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;  
  overflow: hidden;
}

.line-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;  
  overflow: hidden;
}

.el {
  width: min(100px, 25%, 50vh, 30ch);
}

Bạn không cần một

.line-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;  
  overflow: hidden;
}

.el {
  width: min(10vw + 10%, 100px);
}

Nó rất hợp lý mà bạn muốn đặt một giá trị tối đa và tối đa. Bạn có thể làm tổ các chức năng để làm điều này, nhưng nó ít bị suy nghĩ hơn để làm với

.line-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;  
  overflow: hidden;
}

.el {
  /* Note we're always using a relative unit somewhere
     so that zooming stays effective. */
  font-size: clamp(0.9rem, 1vw + 1rem, 2.2rem);
}

Ở đây, video nhúng video:

Liên kết trực tiếp →