Làm cách nào để cắt bớt văn bản trong CSS?

Không có thuộc tính CSS gốc để cắt bớt văn bản. Tuy nhiên, bạn có thể sử dụng ký tự dấu chấm lửng để hiển thị văn bản bị cắt bớt

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

Lưu ý rằng chúng tôi đã cung cấp cho phần tử một chiều rộng cố định. Điều này được thực hiện vì phần tử cần một chiều rộng nhất định

Có thể cắt ngắn các dòng văn bản khá dễ dàng trong CSS, bạn có thể đặt rõ ràng chiều rộng và chiều cao của phần tử chứa và đặt

text-overflow: clip;
text-overflow: ellipsis ellipsis;
text-overflow: ellipsis " [..]";

/* Global values */
text-overflow: inherit;
text-overflow: initial;
text-overflow: revert;
text-overflow: revert-layer;
text-overflow: unset;
3. Như vậy mặc dù điều này không thực sự nói với người dùng nhiều như vậy và không thực sự là một ý tưởng hay. Nếu bạn muốn cho người đọc biết rằng văn bản đã bị cắt bớt một cách có chủ ý, bạn nên thêm một hình elip hoặc 3 dấu chấm như vậy

Vậy điều này được thực hiện như thế nào, làm cách nào bạn có thể tạo Dấu ba chấm tự động? . gain this is fairly easy for single-lines.

Rút ngắn một dòng

Các dòng đơn bạn cần đặt giá trị thuộc tính tràn văn bản thành dấu chấm lửng

Nếu div gói các phần tử của bạn không có chiều cao rõ ràng, bạn cũng cần thêm

text-overflow: clip;
text-overflow: ellipsis ellipsis;
text-overflow: ellipsis " [..]";

/* Global values */
text-overflow: inherit;
text-overflow: initial;
text-overflow: revert;
text-overflow: revert-layer;
text-overflow: unset;
4, dù sao đi nữa bạn nên sử dụng tốt nhất trong hầu hết các trường hợp sử dụng. khoảng trắng. nowrap đảm bảo rằng nếu chiều rộng của div của bạn quá hẹp so với độ dài của văn bản thì văn bản sẽ không xuống dòng tiếp theo. Đây là đoạn mã cần thiết để tạo H1 ở dạng div hiển thị có dấu chấm lửng trên thiết bị di động. Tôi cũng đã đặt kích thước phông chữ nhỏ hơn để điều này chỉ hiển thị trên rất ít trang nhưng đảm bảo rằng thiết kế không bị hỏng

#headertitle h1 {
    width: 325px;
    font-size: 0.85em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

Vâng đó là dễ dàng

Rút ngắn nhiều dòng

Multi-line không khó hơn nhiều, nó là sự kết hợp của 3 tính chất. Giải pháp là thuộc tính CSS độc quyền sẽ giới hạn văn bản của bộ chứa khối ở một số dòng nhất định khi được sử dụng kết hợp với

text-overflow: clip;
text-overflow: ellipsis ellipsis;
text-overflow: ellipsis " [..]";

/* Global values */
text-overflow: inherit;
text-overflow: initial;
text-overflow: revert;
text-overflow: revert-layer;
text-overflow: unset;
5 và
text-overflow: clip;
text-overflow: ellipsis ellipsis;
text-overflow: ellipsis " [..]";

/* Global values */
text-overflow: inherit;
text-overflow: initial;
text-overflow: revert;
text-overflow: revert-layer;
text-overflow: unset;
6

Mặc dù nó là độc quyền nhưng có 96% hỗ trợ trong các trình duyệt theo Tôi có thể sử dụng không

 

.views-field-title a {
    color: #125f04;
    text-decoration: none;
    font-size: 0.85em;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    /* not needed even though some documentation says it is
    text-overflow: ellipsis; */
}

1 cỡ chữ được đặt thành 0. 85em trong ví dụ này vì các liên kết được gói trong h2. Điều này sẽ được làm lại trong những tuần tới vì chủ đề được thiết kế xung quanh nội dung. Vui lòng xem trang chủ của trang web này trên thiết bị di động hoặc độ rộng hẹp

 

Hỗ trợ tốt cho cả hai và theo như tôi thấy hữu ích nếu bạn có nội dung đôi khi có thể dài hơn mức trung bình. Đối với trường hợp của trang web này, sẽ tốt hơn nếu làm cho văn bản nhỏ hơn cho tiêu đề bài viết và đây là điều tôi sẽ làm khi thực hiện một số sửa đổi chủ đề trong những tuần tiếp theo

Ví dụ đầu tiên là tiêu đề trang trong tiêu đề, nó hoạt động tốt và nó chỉ cắt bớt đối với kích thước thiết bị nhỏ theo chiều rộng. Không muốn dải tiêu đề chiếm nhiều màn hình. Tôi nghĩ nó hoạt động tốt vì nó chỉ chiếm một số ít trang

Một suy nghĩ cuối cùng về việc cắt bớt văn bản là bạn chỉ nên làm điều đó cho các trường hợp cạnh vì nếu mọi phần tử cần được cắt bớt thì bạn nên nghĩ đến việc thiết kế lại giao diện người dùng

Thuộc tính CSS

text-overflow: clip;
text-overflow: ellipsis ellipsis;
text-overflow: ellipsis " [..]";

/* Global values */
text-overflow: inherit;
text-overflow: initial;
text-overflow: revert;
text-overflow: revert-layer;
text-overflow: unset;
7 đặt cách báo hiệu nội dung tràn ẩn cho người dùng. Nó có thể được cắt bớt, hiển thị dấu chấm lửng ('______38') hoặc hiển thị một chuỗi tùy chỉnh

Thuộc tính

text-overflow: clip;
text-overflow: ellipsis ellipsis;
text-overflow: ellipsis " [..]";

/* Global values */
text-overflow: inherit;
text-overflow: initial;
text-overflow: revert;
text-overflow: revert-layer;
text-overflow: unset;
7 không buộc xảy ra tràn. Để làm cho văn bản tràn vào vùng chứa của nó, bạn phải đặt các thuộc tính CSS khác.
text-overflow: clip;
text-overflow: ellipsis ellipsis;
text-overflow: ellipsis " [..]";

/* Global values */
text-overflow: inherit;
text-overflow: initial;
text-overflow: revert;
text-overflow: revert-layer;
text-overflow: unset;
1 và
text-overflow: clip;
text-overflow: ellipsis ellipsis;
text-overflow: ellipsis " [..]";

/* Global values */
text-overflow: inherit;
text-overflow: initial;
text-overflow: revert;
text-overflow: revert-layer;
text-overflow: unset;
2. Ví dụ

overflow: hidden;
white-space: nowrap;

Thuộc tính

text-overflow: clip;
text-overflow: ellipsis ellipsis;
text-overflow: ellipsis " [..]";

/* Global values */
text-overflow: inherit;
text-overflow: initial;
text-overflow: revert;
text-overflow: revert-layer;
text-overflow: unset;
7 chỉ ảnh hưởng đến nội dung tràn phần tử bộ chứa khối theo hướng tiến trình nội tuyến của nó (ví dụ: không tràn văn bản ở cuối hộp)

Thuộc tính

text-overflow: clip;
text-overflow: ellipsis ellipsis;
text-overflow: ellipsis " [..]";

/* Global values */
text-overflow: inherit;
text-overflow: initial;
text-overflow: revert;
text-overflow: revert-layer;
text-overflow: unset;
7 có thể được chỉ định bằng một hoặc hai giá trị. Nếu một giá trị được đưa ra, nó chỉ định hành vi tràn cho cuối dòng (đầu bên phải cho văn bản từ trái sang phải, đầu bên trái cho văn bản từ phải sang trái). Nếu hai giá trị được đưa ra, thì giá trị đầu tiên chỉ định hành vi tràn cho đầu bên trái của dòng và giá trị thứ hai chỉ định hành vi đó cho đầu bên phải của dòng

text-overflow: clip;
text-overflow: ellipsis ellipsis;
text-overflow: ellipsis " [..]";

/* Global values */
text-overflow: inherit;
text-overflow: initial;
text-overflow: revert;
text-overflow: revert-layer;
text-overflow: unset;

  • một trong những giá trị từ khóa.
    text-overflow: clip;
    text-overflow: ellipsis ellipsis;
    text-overflow: ellipsis " [..]";
    
    /* Global values */
    text-overflow: inherit;
    text-overflow: initial;
    text-overflow: revert;
    text-overflow: revert-layer;
    text-overflow: unset;
    
    5,
    text-overflow: clip;
    text-overflow: ellipsis ellipsis;
    text-overflow: ellipsis " [..]";
    
    /* Global values */
    text-overflow: inherit;
    text-overflow: initial;
    text-overflow: revert;
    text-overflow: revert-layer;
    text-overflow: unset;
    
    6,
    text-overflow: clip;
    text-overflow: ellipsis ellipsis;
    text-overflow: ellipsis " [..]";
    
    /* Global values */
    text-overflow: inherit;
    text-overflow: initial;
    text-overflow: revert;
    text-overflow: revert-layer;
    text-overflow: unset;
    
    7
  • chức năng
    text-overflow: clip;
    text-overflow: ellipsis ellipsis;
    text-overflow: ellipsis " [..]";
    
    /* Global values */
    text-overflow: inherit;
    text-overflow: initial;
    text-overflow: revert;
    text-overflow: revert-layer;
    text-overflow: unset;
    
    8, được thông qua một
    text-overflow: clip;
    text-overflow: ellipsis ellipsis;
    text-overflow: ellipsis " [..]";
    
    /* Global values */
    text-overflow: inherit;
    text-overflow: initial;
    text-overflow: revert;
    text-overflow: revert-layer;
    text-overflow: unset;
    
    9 hoặc một
    #headertitle h1 {
        width: 325px;
        font-size: 0.85em;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    20 để kiểm soát khoảng cách mờ dần
  • một
    #headertitle h1 {
        width: 325px;
        font-size: 0.85em;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    21

text-overflow: clip;
text-overflow: ellipsis ellipsis;
text-overflow: ellipsis " [..]";

/* Global values */
text-overflow: inherit;
text-overflow: initial;
text-overflow: revert;
text-overflow: revert-layer;
text-overflow: unset;
5

Giá trị mặc định cho thuộc tính này. Giá trị từ khóa này sẽ cắt bớt văn bản ở giới hạn của vùng nội dung, do đó việc cắt bớt có thể xảy ra ở giữa một ký tự. Để cắt đoạn chuyển tiếp giữa các ký tự, bạn có thể chỉ định

text-overflow: clip;
text-overflow: ellipsis ellipsis;
text-overflow: ellipsis " [..]";

/* Global values */
text-overflow: inherit;
text-overflow: initial;
text-overflow: revert;
text-overflow: revert-layer;
text-overflow: unset;
7 dưới dạng chuỗi trống, nếu điều đó được hỗ trợ trong trình duyệt mục tiêu của bạn.
#headertitle h1 {
    width: 325px;
    font-size: 0.85em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
24

text-overflow: clip;
text-overflow: ellipsis ellipsis;
text-overflow: ellipsis " [..]";

/* Global values */
text-overflow: inherit;
text-overflow: initial;
text-overflow: revert;
text-overflow: revert-layer;
text-overflow: unset;
6

Giá trị từ khóa này sẽ hiển thị dấu chấm lửng (

#headertitle h1 {
    width: 325px;
    font-size: 0.85em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
26,
#headertitle h1 {
    width: 325px;
    font-size: 0.85em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
27) để thể hiện văn bản được cắt bớt. Dấu chấm lửng được hiển thị bên trong khu vực nội dung, làm giảm lượng văn bản được hiển thị. Nếu không đủ chỗ để hiển thị dấu chấm lửng, nó sẽ bị cắt bớt

#headertitle h1 {
    width: 325px;
    font-size: 0.85em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
21 Thử nghiệm

#headertitle h1 {
    width: 325px;
    font-size: 0.85em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
21 được sử dụng để thể hiện văn bản được cắt bớt. Chuỗi được hiển thị bên trong khu vực nội dung, rút ​​​​ngắn kích thước của văn bản được hiển thị. Nếu không có đủ không gian để hiển thị chuỗi, nó sẽ bị cắt bớt

text-overflow: clip;
text-overflow: ellipsis ellipsis;
text-overflow: ellipsis " [..]";

/* Global values */
text-overflow: inherit;
text-overflow: initial;
text-overflow: revert;
text-overflow: revert-layer;
text-overflow: unset;
7 Thử nghiệm

Từ khóa này cắt nội dung tràn trong dòng và áp dụng hiệu ứng mờ dần gần cạnh của hộp dòng với độ trong suốt hoàn toàn ở cạnh

.views-field-title a {
    color: #125f04;
    text-decoration: none;
    font-size: 0.85em;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    /* not needed even though some documentation says it is
    text-overflow: ellipsis; */
}
21 Thử nghiệm

Chức năng này cắt nội dung tràn trong dòng và áp dụng hiệu ứng mờ dần gần cạnh của hộp dòng với độ trong suốt hoàn toàn ở cạnh

Đối số xác định khoảng cách áp dụng hiệu ứng mờ dần.

#headertitle h1 {
    width: 325px;
    font-size: 0.85em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
20 được phân giải theo chiều rộng của hộp dòng. Các giá trị thấp hơn
.views-field-title a {
    color: #125f04;
    text-decoration: none;
    font-size: 0.85em;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    /* not needed even though some documentation says it is
    text-overflow: ellipsis; */
}
23 được cắt thành
.views-field-title a {
    color: #125f04;
    text-decoration: none;
    font-size: 0.85em;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    /* not needed even though some documentation says it is
    text-overflow: ellipsis; */
}
23. Các giá trị lớn hơn chiều rộng của hộp dòng được cắt bớt theo chiều rộng của hộp dòng

Giá trị ban đầu ________ 35 Áp dụng cho các phần tử khối chứaInheritednoComputed valueas đã chỉ địnhAnimation typediscrete

#headertitle h1 {
    width: 325px;
    font-size: 0.85em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
2

Ví dụ này hiển thị các giá trị khác nhau cho

text-overflow: clip;
text-overflow: ellipsis ellipsis;
text-overflow: ellipsis " [..]";

/* Global values */
text-overflow: inherit;
text-overflow: initial;
text-overflow: revert;
text-overflow: revert-layer;
text-overflow: unset;
7 được áp dụng cho một đoạn văn, cho văn bản từ trái sang phải và từ phải sang trái

HTML

.views-field-title a {
    color: #125f04;
    text-decoration: none;
    font-size: 0.85em;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    /* not needed even though some documentation says it is
    text-overflow: ellipsis; */
}
2

CSS

.views-field-title a {
    color: #125f04;
    text-decoration: none;
    font-size: 0.85em;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    /* not needed even though some documentation says it is
    text-overflow: ellipsis; */
}
9

Kết quả

Ví dụ này hiển thị cú pháp hai giá trị cho

text-overflow: clip;
text-overflow: ellipsis ellipsis;
text-overflow: ellipsis " [..]";

/* Global values */
text-overflow: inherit;
text-overflow: initial;
text-overflow: revert;
text-overflow: revert-layer;
text-overflow: unset;
7, nơi bạn có thể xác định hành vi tràn khác nhau cho phần đầu và phần cuối của văn bản. Để hiển thị hiệu ứng, chúng ta phải cuộn dòng để đầu dòng cũng bị ẩn

HTML

text-overflow: clip;
text-overflow: ellipsis ellipsis;
text-overflow: ellipsis " [..]";

/* Global values */
text-overflow: inherit;
text-overflow: initial;
text-overflow: revert;
text-overflow: revert-layer;
text-overflow: unset;
0

CSS

text-overflow: clip;
text-overflow: ellipsis ellipsis;
text-overflow: ellipsis " [..]";

/* Global values */
text-overflow: inherit;
text-overflow: initial;
text-overflow: revert;
text-overflow: revert-layer;
text-overflow: unset;
1

JavaScript

text-overflow: clip;
text-overflow: ellipsis ellipsis;
text-overflow: ellipsis " [..]";

/* Global values */
text-overflow: inherit;
text-overflow: initial;
text-overflow: revert;
text-overflow: revert-layer;
text-overflow: unset;
2

Kết quả

Sự chỉ rõ

Phiên bản trước của giao diện này đạt trạng thái Đề xuất ứng viên. Vì một số tính năng không được liệt kê có nguy cơ cần được loại bỏ, thông số kỹ thuật đã được hạ cấp xuống cấp Bản nháp đang hoạt động, giải thích lý do tại sao các trình duyệt triển khai thuộc tính này không được trộn trước, mặc dù không ở trạng thái CR

Làm cách nào để cắt văn bản bằng CSS?

1) Cắt bớt văn bản một dòng bằng dấu chấm lửng .
phần tử phải có. width , max-width hoặc flex-basis (nếu sử dụng flex)
phần tử phải có thuộc tính. gói từ. bây giờ
thuộc tính tràn phải có giá trị khác với giá trị hiển thị. .
phải có giá trị hiển thị dưới dạng khối, khối nội tuyến hoặc bất kỳ giá trị tương đương nào khác, chẳng hạn như mục linh hoạt, v.v.

Làm cách nào để ngắt văn bản trong CSS?

Thuộc tính ngắt từ trong CSS được sử dụng để ngắt các từ dài và xuống dòng tiếp theo . Thuộc tính này được sử dụng để ngăn tràn khi một chuỗi không thể ngắt quá dài để vừa trong hộp chứa.