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".
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ụ: //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
0Check out this Pen!
overflow
2Check out this Pen!
3Check out this Pen!
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
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.
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ì
Làm thế nào văn bản
Trắng là gì
, and as necessary to fill line boxes. pre-line. Sequences of white space are collapsed.