Hướng dẫn how do you truncate a paragraph in html css? - làm thế nào để bạn cắt ngắn một đoạn trong html css?

Hướng dẫn how do you truncate a paragraph in html css? - làm thế nào để bạn cắt ngắn một đoạn trong html css?

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

Hướng dẫn how do you truncate a paragraph in html css? - làm thế nào để bạn cắt ngắn một đoạn trong html css?

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

Hướng dẫn how do you truncate a paragraph in html css? - làm thế nào để bạn cắt ngắn một đoạn trong html css?

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

Hướng dẫn how do you truncate a paragraph in html css? - làm thế nào để bạn cắt ngắn một đoạn trong html css?

Sử dụng bootstrap:

p {
 height: 30%;
 overflow: hidden;
 text-overflow: ellipsis;
}
0

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

Hướng dẫn how do you truncate a paragraph in html css? - làm thế nào để bạn cắt ngắn một đoạn trong html css?

CimeicimeiCimei

552 huy hiệu bạc6 Huy hiệu đồng2 silver badges6 bronze badges

Làm thế nào để bạn cắt văn bản trong HTML CSS?

Với văn bản kẹp dòng có thể bị cắt sau nhiều dòng, điều thú vị hơn nữa là bạn có thể cắt ngắn bằng cách chỉ định số dòng nơi bạn muốn cắt ngắn nó. ví dụ: -webkit-line-kẹp: 3; Sẽ cắt ngắn bắt đầu cắt ngắn văn bản từ dòng thứ ba.specifying the line number where you want to truncate it. eg: -webkit-line-clamp: 3; will truncate start truncating the text from the third line.

Làm thế nào để tôi cắt ngắn một đoạn văn trong HTML?

Tạo một hàm cắt (str, maxlength) kiểm tra độ dài của str và, nếu nó vượt quá maxlength - thay thế phần cuối của STR bằng ký tự Ellipsis ",", để làm cho độ dài của nó bằng Maxlength.Kết quả của hàm phải là chuỗi cắt ngắn (nếu cần). that checks the length of the str and, if it exceeds maxlength – replaces the end of str with the ellipsis character "…" , to make its length equal to maxlength . The result of the function should be the truncated (if needed) string.

Làm thế nào để bạn cắt ngắn một đoạn văn xuống 100 ký tự trong HTML?

text_truncate = function (str, length, ending) {if (length == null) {length = 100;} if (ending == null) {ending = '...';} if (str. length> length) {return str.con (0, chiều dài - kết thúc. chiều dài) + kết thúc;} khác {return str;}};Bảng điều khiển.

Làm cách nào để giới hạn một dòng đoạn trong HTML?

Cách dễ nhất để giới hạn văn bản đến N dòng là sử dụng kẹp dòng.N có thể là bất kỳ số dương, nhưng nó sẽ là hai hoặc ba dòng hầu hết thời gian.Trên blog của tôi, tôi đang sử dụng kẹp dòng trong tất cả các thành phần sau loại để đảm bảo rằng nó sẽ có chiều cao giống như anh chị em.use line-clamp . N can be any positive number, but it will be two or three lines most of the time. On my blog, I'm using line-clamp in all post-type components to ensure that it will have the same height as siblings.