Kẹp css html

Bạn đang gặp phải một vấn đề mà trang web của mình khi phản hồi, các dòng văn bản nó liên tục phá vỡ chủ đề yêu quý của mình. Trong bài viết này mình giới thiệu tới các bạn theo một cách khác, đó là sử dụng thuộc tính tràn văn bản trong CSS

Show

lục mục

Cắt 1 dòng

cú pháp

p {
    width: 500px;
    overflow: hidden;
    white-space: nowrap; 
    text-overflow: ellipsis;
}

Giải thích

  •  = 
    clamp( #{3} )

    =
    [ [ '+' | '-' ] ]*

    =
    [ [ '*' | '/' ] ]*

    =
    |
    |
    |
    |
    ( )

    =
    e |
    pi |
    infinity |
    -infinity |
    NaN

    3 Ngừng k cho đoạn văn bản xuống dòng
  •  = 
    clamp( #{3} )

    =
    [ [ '+' | '-' ] ]*

    =
    [ [ '*' | '/' ] ]*

    =
    |
    |
    |
    |
    ( )

    =
    e |
    pi |
    infinity |
    -infinity |
    NaN

    4 Ẩn đoạn văn bản bị thừa
  •  = 
    clamp( #{3} )

    =
    [ [ '+' | '-' ] ]*

    =
    [ [ '*' | '/' ] ]*

    =
    |
    |
    |
    |
    ( )

    =
    e |
    pi |
    infinity |
    -infinity |
    NaN

    5 Cắt một đoạn văn bản và thay thế bằng dấu …
Cắt nhiều dòng

cú pháp

p {
    width: 500px;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 25px;
    -webkit-line-clamp: 3;
    height: 75px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}

Giải thích

  •  = 
    clamp( #{3} )

    =
    [ [ '+' | '-' ] ]*

    =
    [ [ '*' | '/' ] ]*

    =
    |
    |
    |
    |
    ( )

    =
    e |
    pi |
    infinity |
    -infinity |
    NaN

    6. Set line-height cho đoạn văn bản
  •  = 
    clamp( #{3} )

    =
    [ [ '+' | '-' ] ]*

    =
    [ [ '*' | '/' ] ]*

    =
    |
    |
    |
    |
    ( )

    =
    e |
    pi |
    infinity |
    -infinity |
    NaN

    7. Number lines text display
  •  = 
    clamp( #{3} )

    =
    [ [ '+' | '-' ] ]*

    =
    [ [ '*' | '/' ] ]*

    =
    |
    |
    |
    |
    ( )

    =
    e |
    pi |
    infinity |
    -infinity |
    NaN

    8. Đặt chiều cao cho đoạn văn bản
  • chiều cao = chiều cao dòng * kẹp dòng

Tuy đơn giản nhưng ai cũng phải biết. Theo dõi loạt thủ thuật CSS khác tại đây

mẹo css tràn văn bản

Hàm CSS

 = 
clamp( #{3} )

=
[ [ '+' | '-' ] ]*

=
[ [ '*' | '/' ] ]*

=
|
|
|
|
( )

=
e |
pi |
infinity |
-infinity |
NaN

9 kẹp một giá trị ở giữa trong phạm vi giá trị giữa giới hạn tối thiểu đã xác định và giới hạn tối đa. Hàm nhận ba tham số. giá trị tối thiểu, giá trị ưu tiên và giá trị tối đa được phép

Lưu ý rằng việc sử dụng

 = 
clamp( #{3} )

=
[ [ '+' | '-' ] ]*

=
[ [ '*' | '/' ] ]*

=
|
|
|
|
( )

=
e |
pi |
infinity |
-infinity |
NaN

9 cho kích thước phông chữ, như trong các ví dụ này, cho phép bạn đặt kích thước phông chữ tăng dần theo kích thước của chế độ xem, nhưng không thấp hơn kích thước phông chữ tối thiểu hoặc cao hơn kích thước phông chữ tối đa. Nó có tác dụng tương tự như mã trong Kiểu chữ linh hoạt nhưng trong một dòng và không sử dụng truy vấn phương tiện

/* Static values */
width: clamp(200px, 40%,  400px);
width: clamp(20rem, 30vw, 70rem);
width: clamp(10vw,  20em, 100vw);

/* Calculated values */
width: clamp(min(10vw, 20rem), 300px, max(90vw, 55rem));
width: clamp(100px, calc(30% / 2rem + 10px), 900px);

Hàm

 = 
clamp( #{3} )

=
[ [ '+' | '-' ] ]*

=
[ [ '*' | '/' ] ]*

=
|
|
|
|
( )

=
e |
pi |
infinity |
-infinity |
NaN

1 chấp nhận ba biểu thức được phân tách bằng dấu phẩy làm tham số của nó

 = 
clamp( #{3} )

=
[ [ '+' | '-' ] ]*

=
[ [ '*' | '/' ] ]*

=
|
|
|
|
( )

=
e |
pi |
infinity |
-infinity |
NaN

2

Giá trị tối thiểu là giá trị nhỏ nhất (âm nhất). Đây là giới hạn dưới trong phạm vi giá trị được phép. Nếu giá trị ưa thích nhỏ hơn giá trị này, giá trị tối thiểu sẽ được sử dụng

 = 
clamp( #{3} )

=
[ [ '+' | '-' ] ]*

=
[ [ '*' | '/' ] ]*

=
|
|
|
|
( )

=
e |
pi |
infinity |
-infinity |
NaN

3

Giá trị ưa thích là biểu thức có giá trị sẽ được sử dụng miễn là kết quả nằm giữa giá trị tối thiểu và tối đa

 = 
clamp( #{3} )

=
[ [ '+' | '-' ] ]*

=
[ [ '*' | '/' ] ]*

=
|
|
|
|
( )

=
e |
pi |
infinity |
-infinity |
NaN

4

Giá trị lớn nhất là giá trị biểu thức lớn nhất (dương nhất) mà giá trị của thuộc tính sẽ được gán nếu giá trị ưu tiên lớn hơn giới hạn trên này

Các biểu thức có thể là các hàm toán học (xem

 = 
clamp( #{3} )

=
[ [ '+' | '-' ] ]*

=
[ [ '*' | '/' ] ]*

=
|
|
|
|
( )

=
e |
pi |
infinity |
-infinity |
NaN

0 để biết thêm thông tin), các giá trị bằng chữ, các biểu thức khác đánh giá một loại đối số hợp lệ (như
 = 
clamp( #{3} )

=
[ [ '+' | '-' ] ]*

=
[ [ '*' | '/' ] ]*

=
|
|
|
|
( )

=
e |
pi |
infinity |
-infinity |
NaN

1) hoặc các hàm
 = 
clamp( #{3} )

=
[ [ '+' | '-' ] ]*

=
[ [ '*' | '/' ] ]*

=
|
|
|
|
( )

=
e |
pi |
infinity |
-infinity |
NaN

2 và
 = 
clamp( #{3} )

=
[ [ '+' | '-' ] ]*

=
[ [ '*' | '/' ] ]*

=
|
|
|
|
( )

=
e |
pi |
infinity |
-infinity |
NaN

3 lồng nhau. Đối với các biểu thức toán học, bạn có thể sử dụng phép cộng, phép trừ, phép nhân và phép chia mà không cần sử dụng chính hàm
 = 
clamp( #{3} )

=
[ [ '+' | '-' ] ]*

=
[ [ '*' | '/' ] ]*

=
|
|
|
|
( )

=
e |
pi |
infinity |
-infinity |
NaN

0. Bạn cũng có thể sử dụng dấu ngoặc đơn để thiết lập thứ tự tính toán khi cần thiết

Bạn có thể sử dụng các đơn vị khác nhau cho từng giá trị trong biểu thức của mình và các đơn vị khác nhau trong bất kỳ hàm toán học nào tạo thành bất kỳ đối số nào

Hãy ghi nhớ các khía cạnh sau khi làm việc với chức năng

  • Các biểu thức toán học liên quan đến tỷ lệ phần trăm cho chiều rộng và chiều cao trên các cột của bảng, các nhóm cột của bảng, các hàng của bảng, các nhóm hàng của bảng và các ô của bảng trong cả bảng bố cục tự động và bảng bố trí cố định có thể được xử lý như thể
     = 
    clamp( #{3} )

    =
    [ [ '+' | '-' ] ]*

    =
    [ [ '*' | '/' ] ]*

    =
    |
    |
    |
    |
    ( )

    =
    e |
    pi |
    infinity |
    -infinity |
    NaN

    5 đã được chỉ định
  • Nó được phép lồng các hàm
     = 
    clamp( #{3} )

    =
    [ [ '+' | '-' ] ]*

    =
    [ [ '*' | '/' ] ]*

    =
    |
    |
    |
    |
    ( )

    =
    e |
    pi |
    infinity |
    -infinity |
    NaN

    3 và
     = 
    clamp( #{3} )

    =
    [ [ '+' | '-' ] ]*

    =
    [ [ '*' | '/' ] ]*

    =
    |
    |
    |
    |
    ( )

    =
    e |
    pi |
    infinity |
    -infinity |
    NaN

    2 làm giá trị biểu thức, trong trường hợp đó, các hàm bên trong được coi là dấu ngoặc đơn đơn giản. Các biểu thức là các biểu thức toán học đầy đủ, vì vậy bạn có thể sử dụng phép cộng, phép trừ, phép nhân và phép chia trực tiếp mà không cần sử dụng chính hàm calc()
  • Biểu thức có thể là các giá trị kết hợp các toán tử cộng (
     = 
    clamp( #{3} )

    =
    [ [ '+' | '-' ] ]*

    =
    [ [ '*' | '/' ] ]*

    =
    |
    |
    |
    |
    ( )

    =
    e |
    pi |
    infinity |
    -infinity |
    NaN

    8 ), trừ (
     = 
    clamp( #{3} )

    =
    [ [ '+' | '-' ] ]*

    =
    [ [ '*' | '/' ] ]*

    =
    |
    |
    |
    |
    ( )

    =
    e |
    pi |
    infinity |
    -infinity |
    NaN

    9 ), nhân (
    p {
        width: 500px;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 25px;
        -webkit-line-clamp: 3;
        height: 75px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
    }
    
    30 ) và chia (
    p {
        width: 500px;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 25px;
        -webkit-line-clamp: 3;
        height: 75px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
    }
    
    31 ), sử dụng quy tắc ưu tiên toán tử tiêu chuẩn. Đảm bảo đặt khoảng trắng ở mỗi bên của toán hạng
     = 
    clamp( #{3} )

    =
    [ [ '+' | '-' ] ]*

    =
    [ [ '*' | '/' ] ]*

    =
    |
    |
    |
    |
    ( )

    =
    e |
    pi |
    infinity |
    -infinity |
    NaN

    8 và
     = 
    clamp( #{3} )

    =
    [ [ '+' | '-' ] ]*

    =
    [ [ '*' | '/' ] ]*

    =
    |
    |
    |
    |
    ( )

    =
    e |
    pi |
    infinity |
    -infinity |
    NaN

    9. Các toán hạng trong biểu thức có thể là bất kỳ giá trị cú pháp
     = 
    clamp( #{3} )

    =
    [ [ '+' | '-' ] ]*

    =
    [ [ '*' | '/' ] ]*

    =
    |
    |
    |
    |
    ( )

    =
    e |
    pi |
    infinity |
    -infinity |
    NaN

    1 nào. Bạn có thể sử dụng các đơn vị khác nhau cho từng giá trị trong biểu thức của mình. Bạn cũng có thể sử dụng dấu ngoặc đơn để thiết lập thứ tự tính toán khi cần thiết
  • Thông thường, bạn sẽ muốn sử dụng
     = 
    clamp( #{3} )

    =
    [ [ '+' | '-' ] ]*

    =
    [ [ '*' | '/' ] ]*

    =
    |
    |
    |
    |
    ( )

    =
    e |
    pi |
    infinity |
    -infinity |
    NaN

    2 và
     = 
    clamp( #{3} )

    =
    [ [ '+' | '-' ] ]*

    =
    [ [ '*' | '/' ] ]*

    =
    |
    |
    |
    |
    ( )

    =
    e |
    pi |
    infinity |
    -infinity |
    NaN

    3 trong hàm
     = 
    clamp( #{3} )

    =
    [ [ '+' | '-' ] ]*

    =
    [ [ '*' | '/' ] ]*

    =
    |
    |
    |
    |
    ( )

    =
    e |
    pi |
    infinity |
    -infinity |
    NaN

    9

p {
    width: 500px;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 25px;
    -webkit-line-clamp: 3;
    height: 75px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}
38 được giải quyết là
 = 
clamp( #{3} )

=
[ [ '+' | '-' ] ]*

=
[ [ '*' | '/' ] ]*

=
|
|
|
|
( )

=
e |
pi |
infinity |
-infinity |
NaN

4(MIN,
 = 
clamp( #{3} )

=
[ [ '+' | '-' ] ]*

=
[ [ '*' | '/' ] ]*

=
|
|
|
|
( )

=
e |
pi |
infinity |
-infinity |
NaN

2(VAL, MAX))
.

Dựa trên các tham số được cung cấp, hàm trả về

 = 
clamp( #{3} )

=
[ [ '+' | '-' ] ]*

=
[ [ '*' | '/' ] ]*

=
|
|
|
|
( )

=
e |
pi |
infinity |
-infinity |
NaN

1,
/* Static values */
width: clamp(200px, 40%,  400px);
width: clamp(20rem, 30vw, 70rem);
width: clamp(10vw,  20em, 100vw);

/* Calculated values */
width: clamp(min(10vw, 20rem), 300px, max(90vw, 55rem));
width: clamp(100px, calc(30% / 2rem + 10px), 900px);
22,
/* Static values */
width: clamp(200px, 40%,  400px);
width: clamp(20rem, 30vw, 70rem);
width: clamp(10vw,  20em, 100vw);

/* Calculated values */
width: clamp(min(10vw, 20rem), 300px, max(90vw, 55rem));
width: clamp(100px, calc(30% / 2rem + 10px), 900px);
23,
/* Static values */
width: clamp(200px, 40%,  400px);
width: clamp(20rem, 30vw, 70rem);
width: clamp(10vw,  20em, 100vw);

/* Calculated values */
width: clamp(min(10vw, 20rem), 300px, max(90vw, 55rem));
width: clamp(100px, calc(30% / 2rem + 10px), 900px);
24,
/* Static values */
width: clamp(200px, 40%,  400px);
width: clamp(20rem, 30vw, 70rem);
width: clamp(10vw,  20em, 100vw);

/* Calculated values */
width: clamp(min(10vw, 20rem), 300px, max(90vw, 55rem));
width: clamp(100px, calc(30% / 2rem + 10px), 900px);
25,
/* Static values */
width: clamp(200px, 40%,  400px);
width: clamp(20rem, 30vw, 70rem);
width: clamp(10vw,  20em, 100vw);

/* Calculated values */
width: clamp(min(10vw, 20rem), 300px, max(90vw, 55rem));
width: clamp(100px, calc(30% / 2rem + 10px), 900px);
26 hoặc
/* Static values */
width: clamp(200px, 40%,  400px);
width: clamp(20rem, 30vw, 70rem);
width: clamp(10vw,  20em, 100vw);

/* Calculated values */
width: clamp(min(10vw, 20rem), 300px, max(90vw, 55rem));
width: clamp(100px, calc(30% / 2rem + 10px), 900px);
27

 = 
clamp( #{3} )

=
[ [ '+' | '-' ] ]*

=
[ [ '*' | '/' ] ]*

=
|
|
|
|
( )

=
e |
pi |
infinity |
-infinity |
NaN

Trong ví dụ này, chúng tôi có một ví dụ phản hồi đơn giản sử dụng

 = 
clamp( #{3} )

=
[ [ '+' | '-' ] ]*

=
[ [ '*' | '/' ] ]*

=
|
|
|
|
( )

=
e |
pi |
infinity |
-infinity |
NaN

2,
 = 
clamp( #{3} )

=
[ [ '+' | '-' ] ]*

=
[ [ '*' | '/' ] ]*

=
|
|
|
|
( )

=
e |
pi |
infinity |
-infinity |
NaN

3 và
 = 
clamp( #{3} )

=
[ [ '+' | '-' ] ]*

=
[ [ '*' | '/' ] ]*

=
|
|
|
|
( )

=
e |
pi |
infinity |
-infinity |
NaN

9 cho một số kích thước

Các phần tử ________ 391 ________ 392 được đặt là ________ 393. Điều này có nghĩa là chiều rộng sẽ được đặt thành

 = 
clamp( #{3} )

=
[ [ '+' | '-' ] ]*

=
[ [ '*' | '/' ] ]*

=
|
|
|
|
( )

=
e |
pi |
infinity |
-infinity |
NaN

94, trừ khi kết quả của
 = 
clamp( #{3} )

=
[ [ '+' | '-' ] ]*

=
[ [ '*' | '/' ] ]*

=
|
|
|
|
( )

=
e |
pi |
infinity |
-infinity |
NaN

95 nhỏ hơn
 = 
clamp( #{3} )

=
[ [ '+' | '-' ] ]*

=
[ [ '*' | '/' ] ]*

=
|
|
|
|
( )

=
e |
pi |
infinity |
-infinity |
NaN

94, trong trường hợp đó, nó sẽ được đặt thành giá trị đó thay thế.
 = 
clamp( #{3} )

=
[ [ '+' | '-' ] ]*

=
[ [ '*' | '/' ] ]*

=
|
|
|
|
( )

=
e |
pi |
infinity |
-infinity |
NaN

2 cho phép bạn đặt giá trị tối đa

Phần tử ________ 398 ________ 399 được đặt là ________ 390. Điều này có nghĩa là

 = 
clamp( #{3} )

=
[ [ '+' | '-' ] ]*

=
[ [ '*' | '/' ] ]*

=
|
|
|
|
( )

=
e |
pi |
infinity |
-infinity |
NaN

99 sẽ được đặt thành
 = 
clamp( #{3} )

=
[ [ '+' | '-' ] ]*

=
[ [ '*' | '/' ] ]*

=
|
|
|
|
( )

=
e |
pi |
infinity |
-infinity |
NaN

92, trừ khi giá trị tính toán của
 = 
clamp( #{3} )

=
[ [ '+' | '-' ] ]*

=
[ [ '*' | '/' ] ]*

=
|
|
|
|
( )

=
e |
pi |
infinity |
-infinity |
NaN

93 lớn hơn giá trị của
 = 
clamp( #{3} )

=
[ [ '+' | '-' ] ]*

=
[ [ '*' | '/' ] ]*

=
|
|
|
|
( )

=
e |
pi |
infinity |
-infinity |
NaN

92, trong trường hợp đó, nó sẽ được đặt thành giá trị đó thay thế.
 = 
clamp( #{3} )

=
[ [ '+' | '-' ] ]*

=
[ [ '*' | '/' ] ]*

=
|
|
|
|
( )

=
e |
pi |
infinity |
-infinity |
NaN

3 cho phép bạn đặt giá trị tối thiểu, trong những trường hợp như thế này sẽ hữu ích cho mục đích trợ năng

Phần tử ________ 396 ________ 399 được đặt là ________ 398. Điều này có nghĩa là

 = 
clamp( #{3} )

=
[ [ '+' | '-' ] ]*

=
[ [ '*' | '/' ] ]*

=
|
|
|
|
( )

=
e |
pi |
infinity |
-infinity |
NaN

99 sẽ được đặt ở
 = 
clamp( #{3} )

=
[ [ '+' | '-' ] ]*

=
[ [ '*' | '/' ] ]*

=
|
|
|
|
( )

=
e |
pi |
infinity |
-infinity |
NaN

10, cho đến khi giá trị tính toán của
 = 
clamp( #{3} )

=
[ [ '+' | '-' ] ]*

=
[ [ '*' | '/' ] ]*

=
|
|
|
|
( )

=
e |
pi |
infinity |
-infinity |
NaN

11 trở nên lớn hơn giá trị của
 = 
clamp( #{3} )

=
[ [ '+' | '-' ] ]*

=
[ [ '*' | '/' ] ]*

=
|
|
|
|
( )

=
e |
pi |
infinity |
-infinity |
NaN

10. Tại thời điểm này,
 = 
clamp( #{3} )

=
[ [ '+' | '-' ] ]*

=
[ [ '*' | '/' ] ]*

=
|
|
|
|
( )

=
e |
pi |
infinity |
-infinity |
NaN

99 sẽ được đặt thành
 = 
clamp( #{3} )

=
[ [ '+' | '-' ] ]*

=
[ [ '*' | '/' ] ]*

=
|
|
|
|
( )

=
e |
pi |
infinity |
-infinity |
NaN

11, cho đến khi giá trị tính toán của
 = 
clamp( #{3} )

=
[ [ '+' | '-' ] ]*

=
[ [ '*' | '/' ] ]*

=
|
|
|
|
( )

=
e |
pi |
infinity |
-infinity |
NaN

11 trở nên lớn hơn giá trị của
 = 
clamp( #{3} )

=
[ [ '+' | '-' ] ]*

=
[ [ '*' | '/' ] ]*

=
|
|
|
|
( )

=
e |
pi |
infinity |
-infinity |
NaN

16. Tại thời điểm này,
 = 
clamp( #{3} )

=
[ [ '+' | '-' ] ]*

=
[ [ '*' | '/' ] ]*

=
|
|
|
|
( )

=
e |
pi |
infinity |
-infinity |
NaN

99 sẽ được đặt thành
 = 
clamp( #{3} )

=
[ [ '+' | '-' ] ]*

=
[ [ '*' | '/' ] ]*

=
|
|
|
|
( )

=
e |
pi |
infinity |
-infinity |
NaN

16.
 = 
clamp( #{3} )

=
[ [ '+' | '-' ] ]*

=
[ [ '*' | '/' ] ]*

=
|
|
|
|
( )

=
e |
pi |
infinity |
-infinity |
NaN

9 cho phép bạn đặt giá trị tối thiểu và tối đa