vào ngày 18 tháng 2 năm 2011 [được cập nhật vào ngày 30 tháng 9 năm 2022]
Tất cả những điều sau đây được yêu cầu, do đó, văn bản phải nằm trong một đường thẳng duy nhất tràn ra một hộp trong đó tràn đó được ẩn.
.truncate {
width: 250px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
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:
Tìm kiếm cắt ngắn đến một số dòng cụ thể? Bạn cũng có thể đào hiệu ứng cắt ngắn gọn gàng này.
Tôi muốn cắt ngắn một văn bản trong một trang HTML.
style.css:
p {
height: 30%;
overflow: hidden;
text-overflow: ellipsis;
}
index.html
hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
Tôi muốn nhận được một kết quả như vậy:
hhhhhhhhhhhhhhhhhhhhhhhhhhhhh
hhhhhhhhhhhhhhhhhhhhhhhhhhhhh
hhhhhhhhhhhhhhhhhhhhhhhhhhhhh
hhhhhhhhhhhhhhhhhhhhhhhhhh...
Nhưng tôi không thể có kết quả này bằng cách sử dụng Style.css được đề cập dưới đây. Làm thế nào tôi có thể sửa nó?
Khi được hỏi ngày 29 tháng 5 năm 2017 lúc 10:59May 29, 2017 at 10:59
1
Bạn có thể đang tìm kiếm điều này
p{
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
max-width: 200px;
overflow: hidden;
text-overflow: ellipsis;
height:56px;
}
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa
Lưu ý: nó duy nhất hoạt động trên các trình duyệt WebKit
Đã trả lời ngày 29 tháng 5 năm 2017 lúc 11:08May 29, 2017 at 11:08
RahulrahulRahul
4.2241 Huy hiệu vàng9 Huy hiệu bạc1 gold badge9 silver badges10 bronze badges
2
CSS-Rule
p {
height: 30%;
overflow: hidden;
text-overflow: ellipsis;
}
1 sẽ buộc các từ dài như bạn phải phá vỡ ở cuối div. Bạn cũng có thể giới hạn chiều rộng của DIV có hiệu ứng tương tự khi bạn viết bài.p {
height: 30%;
overflow: hidden;
text-overflow: ellipsis;
word-wrap: break-word;
width: 200px;
}
hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
Đã trả lời ngày 29 tháng 5 năm 2017 lúc 11:00May 29, 2017 at 11:00
CoderpicoderpiCoderPi
12.7K4 Huy hiệu vàng33 Huy hiệu bạc61 Huy hiệu Đồng4 gold badges33 silver badges61 bronze badges
6
Đây là những gì nó thường được sử dụng khi dự kiến rằng các từ dài sẽ được giới thiệu sẽ phá vỡ bố cục của bạn.
p { overflow-wrap: break-word }
Điều này sẽ gây ra các dòng sẽ bị phá vỡ giữa hai ký tự. Bạn cũng có thể dùng:
word-break: break-all
... Nếu bạn mong đợi Trung Quốc, Nhật Bản và Hàn Quốc sẽ được đưa vào lĩnh vực này.
Đã trả lời ngày 29 tháng 5 năm 2017 lúc 11:17May 29, 2017 at 11:17
Sử dụng bootstrap:
p {
height: 30%;
overflow: hidden;
text-overflow: ellipsis;
}
0Sẽ cho bạn:
Praeterea iter e ...
Praeterea iter est q ...
Thêm tại: văn bản bootstrap
Đã trả lời ngày 20 tháng 11 năm 2020 lúc 19:54Nov 20, 2020 at 19:54
CimeicimeiCimei
552 huy hiệu bạc6 Huy hiệu đồng2 silver badges6 bronze badges