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ậyVậ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;
6Mặ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ỉnhThuộ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òngtext-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.
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;
7text-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;
- chức năng
8, được thông qua mộttext-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ộttext-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;
20 để kiểm soát khoảng cách mờ dần#headertitle h1 { width: 325px; font-size: 0.85em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
- một
21#headertitle h1 { width: 325px; font-size: 0.85em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
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;
5Giá 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;
}
24text-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;
6Giá 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ớttext-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ệmTừ 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ệmChứ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òngGiá 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;
}
2Ví 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áiHTML
.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; */
}
2CSS
.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; */
}
9Kế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ị ẩnHTML
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;
0CSS
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;
1JavaScript
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;
2Kết quả
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