Tất cả những điều sau đây là bắt buộc, vì vậy văn bản phải nằm trên một đường thẳng duy nhất tràn qua hộp nơi phần tràn đó bị ẩn
.truncate {
width: 250px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Dự phòng nhúng CodePen
Lưu ý chiều rộng cố định được sử dụng ở đây. Ý chính là phần tử cần một số loại chiều rộng xác định, mà bạn phải đặc biệt cẩn thận với flexbox
Dự phòng nhúng CodePen
Tìm cách cắt bớt một số dòng cụ thể?
Thuộc tính
overflow: hidden;
white-space: nowrap;
1 chỉ định cách báo hiệu nội dung bị tràn không hiển thị cho người dùng. Nó có thể được cắt bớt, hiển thị dấu chấm lửng [. ] hoặc hiển thị một chuỗi tùy chỉnhCần có cả hai thuộc tính sau để tràn văn bản
- khoảng trắng. cái bọc;
- tràn ra. ẩn giấu;
Đưa ra bản chạy thử ❯
Giá trị mặc định. clipKế thừa. không có hoạt ảnh. không. Đọc về animatableVersion. Cú pháp CSS3JavaScript. vật. Phong cách. textOverflow="dấu chấm lửng" Hãy dùng thử
Hỗ trợ trình duyệt
Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính
Các số theo sau -o- chỉ định phiên bản đầu tiên hoạt động với tiền tố
Propertytext-overflow4. 06. 07. 03. 111. 0
9. 0 -o-
Cú pháp CSS
tràn văn bản. kẹp. dấu chấm lửng. chuỗi. ban đầu. thừa kế;
Giá trị tài sản
Giá trịMô tảDemoclipGiá trị mặc định. Văn bản bị cắt bớt và không thể truy cập đượcBản trình diễn ❯dấu chấm lửngHiển thị dấu chấm lửng [". "] để biểu thị văn bản đã cắt bớtDemo ❯stringKết xuất chuỗi đã cho để biểu thị văn bản đã cắt bớtĐặt thuộc tính này thành giá trị mặc định của nó. Đọc về khởi tạo Kế thừa thuộc tính này từ phần tử cha của nó. Đọc về thừa kế
Thuộc tính CSS
overflow: hidden;
white-space: nowrap;
1 đặ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 ['______33'] hoặc hiển thị một chuỗi tùy chỉnhThuộc tính
overflow: hidden;
white-space: nowrap;
1 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
overflow: hidden;
white-space: nowrap;
1 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
overflow: hidden;
white-space: nowrap;
1 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, 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;
00 để kiểm soát khoảng cách mờ dầntext-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
01text-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;
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 đổi giữa các ký tự, bạn có thể chỉ định
overflow: hidden;
white-space: nowrap;
1 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. 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;
04text-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 [
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;
06, 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;
07] để biểu thị 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ớ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;
01 Thử nghiệmtext-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;
01 đượ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
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;
01 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.
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;
00 được phân giải theo chiều rộng của hộp dòng. Các giá trị thấp hơn ________ 203 được cắt thành ________ 203. 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 ________ 15 Áp dụng cho các phần tử khối chứaInheritednoComputed valueas đã chỉ địnhAnimation typediscrete
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;
0Ví dụ này hiển thị các giá trị khác nhau cho
overflow: hidden;
white-space: nowrap;
1 đượ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
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;
7Kết quả
Ví dụ này hiển thị cú pháp hai giá trị cho
overflow: hidden;
white-space: nowrap;
1, 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;
8CSS
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;
9JavaScript
overflow: hidden;
white-space: nowrap;
0Kế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 phải loại bỏ, thông số kỹ thuật đã được hạ cấp xuống cấp độ Bản thảo làm việc, 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, mặc dù không ở trạng thái CR