Hướng dẫn text getting cut off html - văn bản bị cắt html

Question

Tôi đang làm việc tích hợp một plugin jQuery ẩn các phần của trang cho đến khi người dùng nhấp vào "nút thích".

Nội dung chính Show

Tài sản liên quan
Các nguồn lực khác
Hỗ trợ trình duyệt
Văn bản là gì
Làm thế nào văn bản
Trắng là gì
Tại sao văn bản

Một phần của văn bản của Widget Facebook đang bị cắt. Tôi đã chơi xung quanh với CSS, nhưng không thể hiển thị đầy đủ.

Nếu chiều rộng của một container được đặt chính xác, điều gì khác có thể khiến văn bản bị cắt?

Ví dụ: http://go.mouseflow.com/like/

Lưu ý cách nó nói "313 PEO" khi nó nên nói "313 người thích trang này." Tôi đã kiểm tra nguồn và văn bản ở đó, nó không hiển thị.

Đã hỏi ngày 16 tháng 6 năm 2013 lúc 17:01Jun 16, 2013 at 17:01

Trent Scotttrent ScottTrent Scott

2.0088 Huy hiệu vàng33 Huy hiệu bạc 50 Huy hiệu Đồng8 gold badges33 silver badges50 bronze badges

1

Lý do là ở đây:

.ui-locker-facebook .fb-like span {
    height: 24px !important;
    overflow: hidden;   /*change to 'visible'*/
}

Đã trả lời ngày 16 tháng 6 năm 2013 lúc 17:09Jun 16, 2013 at 17:09

0

DigitalOcean cung cấp các sản phẩm đám mây cho mọi giai đoạn của hành trình của bạn. Bắt đầu với $ 200 trong tín dụng miễn phí!

Thuộc tính text-overflow trong CSS xử lý các tình huống trong đó văn bản được cắt khi nó tràn vào hộp phần tử. Nó có thể được cắt (nghĩa là cắt bỏ, ẩn), hiển thị dấu chấm lửng (’’,, giá trị phạm vi Unicode U+2026) hoặc hiển thị chuỗi do tác giả xác định (không hỗ trợ trình duyệt hiện tại cho các chuỗi do tác giả xác định).

.ellipsis {
  text-overflow: ellipsis;

  /* Required for text-overflow to do anything */
  white-space: nowrap;
  overflow: hidden;
}

Lưu ý rằng text-overflow chỉ xảy ra khi thuộc tính container overflow có giá trị hidden, scroll hoặc auto và white-space: nowrap;.

Tràn văn bản chỉ có thể xảy ra trên các phần tử cấp khối hoặc nội tuyến, bởi vì phần tử cần có chiều rộng để được tràn. Tràn xảy ra theo hướng được xác định bởi thuộc tính hướng hoặc các thuộc tính liên quan.

Bản demo sau đây hiển thị hành vi của thuộc tính text-overflow bao gồm tất cả các giá trị có thể. Hỗ trợ trình duyệt khác nhau!

Check out this Pen!

Cài đặt overflow thành scroll hoặc auto sẽ hiển thị ScrollBars để tiết lộ văn bản bổ sung, trong khi hidden sẽ không. Văn bản ẩn có thể được chọn bằng cách chọn các hình elip.

Thứ cũ

Một phiên bản cũ của thông số kỹ thuật nói rằng bạn có thể sử dụng URL cho hình ảnh cho dấu chấm lửng, nhưng có vẻ như nó đã bị loại bỏ.

Có một cú pháp hai giá trị, ví dụ:

.ellipsis {
  text-overflow: ellipsis;

  /* Required for text-overflow to do anything */
  white-space: nowrap;
  overflow: hidden;
}

5, sẽ kiểm soát tràn ở bên trái và bên phải của cùng một container. Tôi không chắc chắn làm thế nào điều đó có thể đạt được. Có lẽ văn bản tập trung trong một thùng chứa quá nhỏ? Thông số kỹ thuật mới nói điều này, cũng như xác định một chuỗi, là có nguy cơ.

Tôi không chắc chắn

.ellipsis {
  text-overflow: ellipsis;

  /* Required for text-overflow to do anything */
  white-space: nowrap;
  overflow: hidden;
}

6 đến từ đâu. Nó không có trong thông số kỹ thuật hoặc trong bất kỳ tài liệu nào khác ngoài trên webplatform.org.

Thuộc tính text-overflow từng là cách viết tắt cho sự kết hợp của

.ellipsis {
  text-overflow: ellipsis;

  /* Required for text-overflow to do anything */
  white-space: nowrap;
  overflow: hidden;
}

8 và

.ellipsis {
  text-overflow: ellipsis;

  /* Required for text-overflow to do anything */
  white-space: nowrap;
  overflow: hidden;
}

9, nhưng không còn nữa và các thuộc tính riêng biệt đó không tồn tại.

Tài sản liên quan

```
Check out this Pen!
```
0
overflow
```
Check out this Pen!
```
2
```
Check out this Pen!
```
3

Các nguồn lực khác

Thông số khuyến nghị ứng cử viên W3C
Tài liệu MDN
Tài liệu nền tảng web
Caniuse.com
CSS-Tricks Line Kẹp
Quản lý dấu chấm lửng đa dòng trong CSS thuần túy
Cắt ngắn chuỗi với Ellipsis

Hỗ trợ trình duyệt

Trình duyệt Chrome	Cuộc đi săn	Firefox	Opera	I E	Android	iOS
25+	5.1+	19+	12.1+	IE8+	2.1+	3.2+

Thuộc tính dòng văn bản CSS của CSS hiếm khi được sử dụng nhưng dễ thực hiện. Khi được cho & nbsp; giá trị của dấu chấm lửng, nó sẽ thêm một dấu chấm lửng vào điểm cắt của bất kỳ văn bản nào không phù hợp trong phần tử cha của nó.text-overflow property is rarely used but easy to implement. When given the value of ellipsis, it adds an ellipsis to the cut off point of any text that doesn’t fit within its parent element.

Hướng dẫn text getting cut off html - văn bản bị cắt html

CSS để đạt được hiệu ứng trên trông như thế này:

p{{
không gian trắng: Nowrap; // Điều này ngăn chặn sự phá vỡ dòng: nowrap; //this prevents line breaks
tràn: ẩn; // văn bản ẩn này không phù hợp trong div: hidden; //this hides text that doesnt fit within the div
Text-Overflow: Ellipsis; // Điều này thêm dấu chấm lửng vào điểm cắt: ellipsis; //this adds the ellipsis to the cutoff point
}

Hiệu ứng này chỉ hoạt động cho các dòng đơn, đó là lý do tại sao chúng ta phải bao gồm thuộc tính không gian trắng để nó có chức năng. Nó cũng phải được sử dụng cùng với Overflow: Hidden Thuộc tính/Giá trị.white-space property for it to be functional. It also must be used in conjunction with the overflow: hidden property/value.

Văn bản là gì

Định nghĩa và cách sử dụng. Thuộc tính Text-Overflow chỉ định cách thức các nội dung tràn không được hiển thị nên được báo hiệu cho người dùng. Nó có thể được cắt, hiển thị dấu chấm lửng (...) hoặc hiển thị một chuỗi tùy chỉnh.specifies how overflowed content that is not displayed should be signaled to the user. It can be clipped, display an ellipsis (...), or display a custom string.

Làm thế nào văn bản

Thuộc tính dòng văn bản trong CSS xử lý các tình huống trong đó văn bản được cắt khi nó tràn vào hộp phần tử.Nó có thể được cắt (nghĩa là cắt, ẩn), hiển thị dấu chấm lửng ('' '', giá trị phạm vi Unicode U+2026) hoặc hiển thị chuỗi do tác giả xác định (không hỗ trợ trình duyệt hiện tại cho các chuỗi do tác giả xác định).deals with situations where text is clipped when it overflows the element's box. It can be clipped (i.e. cut off, hidden), display an ellipsis ('…', Unicode Range Value U+2026) or display an author-defined string (no current browser support for author-defined strings).

Trắng là gì

bao bọc trước.Trình tự của không gian trắng được bảo tồn.Các dòng bị hỏng tại các ký tự mới, tại và khi cần thiết để điền vào các hộp dòng.trước dòng.Trình tự của không gian trắng bị sụp đổ.. Sequences of white space are preserved. Lines are broken at newline characters, at
, and as necessary to fill line boxes. pre-line. Sequences of white space are collapsed.

Tại sao văn bản

Text-Overflow: Ellipsis chỉ hoạt động khi sau đây là đúng: Phần tử cha không được đặt để hiển thị: Inline (mặc định của Span) Bạn phải sử dụng Hiển thị: Khối hoặc Display: Inline-Block.Chiều rộng của phần tử phải bị hạn chế trong px (pixel) - nó không hoạt động với các giá trị được chỉ định bằng % (phần trăm.)Parent element is not set to display: inline (span's default,) You must use display: block or display: inline-block. The element's width must be constrained in px (pixels) – it doesn't work with values specified using % (percent.)

programming html What is text How does text What is white Why does text Text-overflow in CSS Text-overflow inline-block

Hướng dẫn text getting cut off html - văn bản bị cắt html

Thứ cũ

Tài sản liên quan

Các nguồn lực khác

Hỗ trợ trình duyệt

Văn bản là gì

Làm thế nào văn bản

Trắng là gì

Tại sao văn bản

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