Làm thế nào để bạn sử dụng dấu chấm lửng trong khoảng css?

Question

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

Nội dung chính Show

Hỗ trợ trình duyệt
Cú pháp CSS
Giá trị tài sản
Tại sao dấu chấm lửng không hoạt động?
Làm cách nào để ẩn thẻ span trong CSS?

.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ỉnh

Cầ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ỉnh

Thuộ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ò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;
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ần

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;

01

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 đổ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;

04

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

01 Thử nghiệ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;

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

01 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;
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òng

Giá 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;

0

Ví 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á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;

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;

7

Kế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ị ẩ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;

8

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;

9

JavaScript

overflow: hidden;
white-space: nowrap;

0

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

Tại sao dấu chấm lửng không hoạt động?

Bạn có thể buộc có dấu chấm lửng trên phần tử HTML miễn là thuộc tính hiển thị của phần tử đó được đặt thành chặn hoặc chặn nội tuyến . Bạn cũng cần đặt tràn. ẩn trên vùng chứa chính. Bạn cũng phải thêm khoảng trắng. cái bọc; . dấu chấm lửng cho phần tử mà bạn muốn dấu ba chấm xuất hiện.

Làm cách nào để ẩn thẻ span trong CSS?

Thuộc tính hidden ẩn phần tử chỉ định 'ẩn' (không có giá trị) hoặc 'hidden="hidden"' . Cả hai đều hợp lệ. Phần tử

programming css

Làm thế nào để bạn sử dụng dấu chấm lửng trong khoảng css?

Hỗ trợ trình duyệt

Cú pháp CSS

Giá trị tài sản

HTML

CSS

Kết quả

HTML

CSS

JavaScript

Kết quả

Tại sao dấu chấm lửng không hoạt động?

Làm cách nào để ẩn thẻ span trong CSS?

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