Hướng dẫn how do you add an ellipsis in css? - làm thế nào để bạn thêm một dấu chấm lửng trong css?

Question

Thuộc tính text-overflow CSS đặt ra cách ẩn nội dung tràn được báo hiệu cho người dùng. Nó có thể được cắt, hiển thị một dấu chấm lửng ('…') hoặc hiển thị một chuỗi tùy chỉnh.text-overflow CSS property sets how hidden overflow content is signaled to users. It can be clipped, display an ellipsis ('…'), or display a custom string.

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ị
Cú pháp hai giá trị
Thông số kỹ thuật
CSS Overflow Module Cấp 3 # Text-Overflow

Thử nó

Thuộc tính text-overflow không buộc phải xảy ra tràn. Để tạo văn bản tràn container 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 chỉ ảnh hưởng đến nội dung đang tràn phần tử hộp chứa theo hướng tiến triển nội tuyến của nó (ví dụ: không tràn văn bản ở dưới cùng của một hộp).

Cú pháp

Thuộc tính text-overflow có thể được chỉ định bằng cách sử dụ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 phần cuối của dòng (đầu bên phải cho văn bản từ trái sang phải, đầu trái cho văn bản từ phải sang trái). Nếu hai giá trị được đưa ra, đầu tiên chỉ định hành vi tràn cho đầu bên trái của dòng và thứ hai chỉ định nó 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 các 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

Hà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;

8, được thông qua

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

text-overflow = 
  clip      |
  ellipsis

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

a

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

Mặc định cho thuộc tính này. Giá trị từ khóa này sẽ cắt giảm văn bản ở giới hạn của khu vực nội dung, do đó việc cắt ngắn có thể xảy ra ở giữa một ký tự. Để kẹp ở quá trình chuyển đổi giữa các ký tự, bạn có thể chỉ định text-overflow dưới dạng chuỗi trống, nếu điều đó được hỗ trợ trong trình duyệt đích 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ị một dấu chấm lửng (

text-overflow = 
  clip      |
  ellipsis

6,

text-overflow = 
  clip      |
  ellipsis

7) để thể hiện văn bản bị cắt. Ellipsis được hiển thị bên trong khu vực nội dung, giảm lượng văn bản được hiển thị. Nếu không có đủ không gian để hiển thị dấu chấm lửng, nó sẽ được cắt.

text-overflow = 
  clip      |
  ellipsis

1 Thử nghiệmExperimental

text-overflow = 
  clip      |
  ellipsis

1 được sử dụng để đại diện cho văn bản bị cắ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ẽ được cắ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ệmExperimental

Từ khóa này kẹp nội dung nội tuyến tràn 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.

<div class="ltr">
  <h2>Left to right text</h2>
  <pre>clip</pre>
  <p class="overflow-clip">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </p>
  <pre>ellipsis</pre>
  <p class="overflow-ellipsis">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </p>
  <pre>" [..]"</pre>
  <p class="overflow-string">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </p>
</div>

<div class="rtl">
  <h2>Right to left text</h2>
  <pre>clip</pre>
  <p class="overflow-clip">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </p>
  <pre>ellipsis</pre>
  <p class="overflow-ellipsis">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </p>
  <pre>" [..]"</pre>
  <p class="overflow-string">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </p>
</div>

1 Thử nghiệmExperimental

Hàm này kẹp nội dung nội tuyến tràn 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 mà hiệu ứng phai được áp dụng.

text-overflow = 
  clip      |
  ellipsis

0 được giải quyết theo chiều rộng của hộp dòng. Các giá trị thấp hơn

<div class="ltr">
  <h2>Left to right text</h2>
  <pre>clip</pre>
  <p class="overflow-clip">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </p>
  <pre>ellipsis</pre>
  <p class="overflow-ellipsis">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </p>
  <pre>" [..]"</pre>
  <p class="overflow-string">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </p>
</div>

<div class="rtl">
  <h2>Right to left text</h2>
  <pre>clip</pre>
  <p class="overflow-clip">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </p>
  <pre>ellipsis</pre>
  <p class="overflow-ellipsis">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </p>
  <pre>" [..]"</pre>
  <p class="overflow-string">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </p>
</div>

3 được cắt thành

<div class="ltr">
  <h2>Left to right text</h2>
  <pre>clip</pre>
  <p class="overflow-clip">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </p>
  <pre>ellipsis</pre>
  <p class="overflow-ellipsis">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </p>
  <pre>" [..]"</pre>
  <p class="overflow-string">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </p>
</div>

<div class="rtl">
  <h2>Right to left text</h2>
  <pre>clip</pre>
  <p class="overflow-clip">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </p>
  <pre>ellipsis</pre>
  <p class="overflow-ellipsis">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </p>
  <pre>" [..]"</pre>
  <p class="overflow-string">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </p>
</div>

3. Các giá trị lớn hơn chiều rộng của hộp dòng được cắ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	Khối các yếu tố container
Thừa hưởng	không
Giá trị tính toán	theo quy định
Loại 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 cho thấy các giá trị khác nhau cho text-overflow đượ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

<div class="ltr">
  <h2>Left to right text</h2>
  <pre>clip</pre>
  <p class="overflow-clip">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </p>
  <pre>ellipsis</pre>
  <p class="overflow-ellipsis">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </p>
  <pre>" [..]"</pre>
  <p class="overflow-string">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </p>
</div>

<div class="rtl">
  <h2>Right to left text</h2>
  <pre>clip</pre>
  <p class="overflow-clip">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </p>
  <pre>ellipsis</pre>
  <p class="overflow-ellipsis">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </p>
  <pre>" [..]"</pre>
  <p class="overflow-string">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </p>
</div>

CSS

p {
  width: 200px;
  border: 1px solid;
  padding: 2px 5px;

  /* Both of the following are required for text-overflow */
  white-space: nowrap;
  overflow: hidden;
}

.overflow-clip {
  text-overflow: clip;
}

.overflow-ellipsis {
  text-overflow: ellipsis;
}

.overflow-string {
  text-overflow: " [..]";
}

body {
  display: flex;
  justify-content: space-around;
}

.ltr > p {
  direction: ltr;
}

.rtl > p {
  direction: rtl;
}

Kết quả

Cú pháp hai giá trị

Ví dụ này cho thấy cú pháp hai giá trị cho text-overflow, trong đó bạn có thể xác định hành vi tràn khác nhau cho bắt đầu và kết thúc văn bản. Để hiển thị hiệu ứng, chúng ta phải cuộn dòng để bắt đầu dòng cũng được ẩn.

HTML

<pre>clip clip</pre>
<p class="overflow-clip-clip">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
<pre>clip ellipsis</pre>
<p class="overflow-clip-ellipsis">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
<pre>ellipsis ellipsis</pre>
<p class="overflow-ellipsis-ellipsis">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
<pre>ellipsis " [..]"</pre>
<p class="overflow-ellipsis-string">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>

CSS

p {
  width: 200px;
  border: 1px solid;
  padding: 2px 5px;

  /* Both of the following are required for text-overflow */
  white-space: nowrap;
  overflow: scroll;
}

.overflow-clip-clip {
  text-overflow: clip clip;
}

.overflow-clip-ellipsis {
  text-overflow: clip ellipsis;
}

.overflow-ellipsis-ellipsis {
  text-overflow: ellipsis ellipsis;
}

.overflow-ellipsis-string {
  text-overflow: ellipsis " [..]";
}

Kết quả

Cú pháp hai giá trị

Kết quả

Cú pháp hai giá trị

Ví dụ này cho thấy cú pháp hai giá trị cho `text-overflow`, trong đó bạn có thể xác định hành vi tràn khác nhau cho bắt đầu và kết thúc văn bản. Để hiển thị hiệu ứng, chúng ta phải cuộn dòng để bắt đầu dòng cũng được ẩn.
JavaScript # text-overflow

// Scroll each paragraph so the start is also hidden
const paras = document.querySelectorAll("p");

for (const para of paras) {
  para.scroll(100, 0);
}

Thông số kỹ thuật

Sự chỉ rõ

CSS Overflow Module Cấp 3 # Text-Overflow

Một phiên bản trước của giao diện này đã đạt được trạng thái đề xuất ứng cử viên. Vì một số tính năng không được liệt kê cần phải được xóa, thông số kỹ thuật đã bị hạ cấp xuống cấp độ dự thảo làm việc, giải thích lý do tại sao các trình duyệt thực hiện thuộc tính này không bị hủy, mặc dù không ở trạng thái CR.
Tính tương thích của trình duyệt web