Làm thế nào để bạn hiển thị một đoạn 3 dòng trong css?

Question

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;

0 đặ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 ('______31') hoặc hiển thị một chuỗi tùy chỉnh

Nội dung chính Show

định nghĩa chính thức
cú pháp chính thức
Cú pháp một giá trị
Cú pháp hai giá trị
thông số kỹ thuật

Thử nó

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;

0 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;

0 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)

cú phá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;

0 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ò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

text-overflow = 
  clip      |
  ellipsis

0 để kiểm soát khoảng cách mờ dần

một

text-overflow = 
  clip      |
  ellipsis

1

giá trị

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;

0 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      |
  ellipsis

4

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 (

text-overflow = 
  clip      |
  ellipsis

6,

text-overflow = 
  clip      |
  ellipsis

7) để 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ớt

text-overflow = 
  clip      |
  ellipsis

1 Thử nghiệm

text-overflow = 
  clip      |
  ellipsis

1 được sử dụng để thể hiện văn bản đã 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

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;

91 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.

text-overflow = 
  clip      |
  ellipsis

0 được phân giải theo chiều rộng của hộp dòng. Các giá trị thấp hơn ________ 193 được cắt thành ________ 193. 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

định nghĩa chính thức

Giá trị ban đầu

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Áp dụng cho các phần tử bộ chứa khốiKế thừakhôngGiá trị tính toánnhư đã chỉ địnhKiểu hoạt hình rời rạc

cú pháp chính thức

text-overflow = 
  clip      |
  ellipsis

ví dụ

Cú pháp một giá trị

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;

0 đượ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

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

CSS

overflow: hidden;
white-space: nowrap;

6

Kết quả

Cú pháp hai giá trị

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;

0, 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

overflow: hidden;
white-space: nowrap;

7

CSS

overflow: hidden;
white-space: nowrap;

8

JavaScript

overflow: hidden;
white-space: nowrap;

9

Kết quả

thông số kỹ thuật

Thông số kỹ thuật Mô-đun tràn CSS Cấp 3
# tràn văn bản

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

programming css

Làm thế nào để bạn hiển thị một đoạn 3 dòng trong css?

Thử nó

cú pháp

giá trị

định nghĩa chính thức

cú pháp chính thức

ví dụ

Cú pháp một giá trị

HTML

CSS

Kết quả

Cú pháp hai giá trị

HTML

CSS

JavaScript

Kết quả

thông số kỹ thuật

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội