Hướng dẫn bootstrap text truncate 2 lines - văn bản bootstrap cắt ngắn 2 dòng

Tôi có một đoạn văn mà tôi đang cố gắng cắt ngắn nó bằng lớp bootstrap

Resize the browser window to see that its wid...

    Resize the browser window to see that its width (max-width) will change at different breakpoints.Resize the browser window to see that its width (max-width) will change at different breakpoints

Nhận đầu ra

Resize the browser window to see that its wid...

Mong đợi sản lượng

Resize the browser window to see that its width (max-width) 
will change at different breakpoints...

Trong CSS nội tuyến tôi đã thử

Resize the browser window to see that its wid...

Resize the browser window to see that its wid...

hỏi ngày 25 tháng 2 năm 2021 lúc 14:49Feb 25, 2021 at 14:49

Niloy Ronyniloy RonyNiloy Rony

5246 Huy hiệu bạc17 Huy hiệu đồng6 silver badges17 bronze badges

Không được xây dựng trực tiếp vào BOOSTRAP4 nhưng đây là phương pháp từ các thủ thuật CSS - mã của Bootstrap trông giống như nó được xây dựng riêng cho 1 dòng. Phương pháp này, chiều rộng cần được đặt ở phần tử cha.

.text-truncate-container {
    width: 250px;
}
.text-truncate-container p {
    -webkit-line-clamp: 3;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

Resize the browser window to see that its width (max-width) will change at different breakpoints.Resize the browser window to see that its width (max-width) will change at different breakpoints.

Đã trả lời ngày 25 tháng 2 năm 2021 lúc 15:48Feb 25, 2021 at 15:48

Để có nội dung dài hơn, bạn có thể thêm một lớp

Resize the browser window to see that its width (max-width) 
will change at different breakpoints...

Resize the browser window to see that its width (max-width) 
will change at different breakpoints...

Resize the browser window to see that its width (max-width) 
will change at different breakpoints...

Resize the browser window to see that its width (max-width) 
will change at different breakpoints...

Resize the browser window to see that its width (max-width) 
will change at different breakpoints...

Văn bản này khá dài, và sẽ bị cắt cụt một khi được hiển thị.

Văn bản này khá dài, và sẽ bị cắt cụt một khi được hiển thị.

<div class="row">
  <div class="col-2 text-truncate">
    This text is quite long, and will be truncated once displayed.
  div>
div>


<span class="d-inline-block text-truncate" style="max-width: 150px;">
  This text is quite long, and will be truncated once displayed.
span>

Tài liệu và ví dụ cho các tiện ích văn bản phổ biến để kiểm soát căn chỉnh, gói, trọng lượng, và nhiều hơn nữa.

Căn chỉnh văn bản

Dễ dàng sắp xếp lại văn bản cho các thành phần với các lớp căn chỉnh văn bản.

Một số văn bản giữ chỗ để chứng minh căn chỉnh văn bản chính đáng. Bạn se lam điêu tương tự cho tôi? Đã đến lúc phải đối mặt với âm nhạc tôi không còn là nàng thơ của bạn nữa. Nghe nó đẹp, là thẩm phán và các cô gái của tôi sẽ bỏ phiếu. Tôi có thể cảm thấy một phượng hoàng trong tôi. Thiên đàng ghen tị với tình yêu của chúng ta, các thiên thần đang khóc từ phía trên. Vâng, bạn đưa tôi đến Utopia.

<p class="text-justify">Some placeholder text to demonstrate justified text alignment. Will you do the same for me? It's time to face the music I'm no longer your muse. Heard it's beautiful, be the judge and my girls gonna take a vote. I can feel a phoenix inside of me. Heaven is jealous of our love, angels are crying from up above. Yeah, you take me to utopia.p>

Đối với căn chỉnh bên trái, phải và trung tâm, các lớp đáp ứng có sẵn sử dụng cùng một điểm dừng chiều rộng chế độ xem như hệ thống lưới.

Văn bản căn chỉnh trái trên tất cả các kích thước chế độ xem.

Trung tâm căn chỉnh văn bản trên tất cả các kích thước chế độ xem.

Đúng văn bản trên tất cả các kích thước chế độ xem.

Văn bản căn chỉnh trái trên sm có kích thước viewports (nhỏ) hoặc rộng hơn.

Văn bản được căn chỉnh trái trên MD có kích thước visports (trung bình) hoặc rộng hơn.

Văn bản căn chỉnh trái trên LG có kích thước visports (lớn) hoặc rộng hơn.

Văn bản căn chỉnh trái trên chế độ xem XL có kích thước (cực lớn) hoặc rộng hơn.

<p class="text-left">Left aligned text on all viewport sizes.p>
<p class="text-center">Center aligned text on all viewport sizes.p>
<p class="text-right">Right aligned text on all viewport sizes.p>

<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.p>
<p class="text-md-left">Left aligned text on viewports sized MD (medium) or wider.p>
<p class="text-lg-left">Left aligned text on viewports sized LG (large) or wider.p>
<p class="text-xl-left">Left aligned text on viewports sized XL (extra-large) or wider.p>

Văn bản gói và tràn

Bao bọc văn bản với một lớp

Resize the browser window to see that its width (max-width) 
will change at different breakpoints...

<div class="badge badge-primary text-wrap" style="width: 6rem;">
  This text should wrap.
div>

Ngăn chặn văn bản kết thúc bằng một lớp

Resize the browser window to see that its width (max-width) 
will change at different breakpoints...

Văn bản này sẽ tràn ra cha mẹ.

<div class="text-nowrap bd-highlight" style="width: 8rem;">
  This text should overflow the parent.
div>

Để có nội dung dài hơn, bạn có thể thêm một lớp

Resize the browser window to see that its width (max-width) 
will change at different breakpoints...

Resize the browser window to see that its width (max-width) 
will change at different breakpoints...

Resize the browser window to see that its width (max-width) 
will change at different breakpoints...

Resize the browser window to see that its width (max-width) 
will change at different breakpoints...

Resize the browser window to see that its width (max-width) 
will change at different breakpoints...

Praeterea iter est quasdam res quas ex Communi.

Praeterea iter est quasdam res quas ex Communi.

Resize the browser window to see that its wid...

Từ phá vỡ

Ngăn chặn các chuỗi văn bản dài phá vỡ bố cục thành phần của bạn bằng cách sử dụng

Resize the browser window to see that its width (max-width) 
will change at different breakpoints...

Resize the browser window to see that its width (max-width) 
will change at different breakpoints...

.text-truncate-container {
    width: 250px;
}
.text-truncate-container p {
    -webkit-line-clamp: 3;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.text-truncate-container {
    width: 250px;
}
.text-truncate-container p {
    -webkit-line-clamp: 3;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.text-truncate-container {
    width: 250px;
}
.text-truncate-container p {
    -webkit-line-clamp: 3;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.text-truncate-container {
    width: 250px;
}
.text-truncate-container p {
    -webkit-line-clamp: 3;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

Resize the browser window to see that its wid...

Chuyển đổi văn bản

Chuyển đổi văn bản trong các thành phần với các lớp viết hoa văn bản.

Văn bản hạ thấp.

Văn bản trên nền.

Văn bản viết hoa.

Resize the browser window to see that its wid...

Lưu ý cách

.text-truncate-container {
    width: 250px;
}
.text-truncate-container p {
    -webkit-line-clamp: 3;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

Trọng lượng phông chữ và in nghiêng

Nhanh chóng thay đổi trọng lượng (độ táo bạo) của văn bản hoặc in nghiêng văn bản.

Chữ in đậm.

Văn bản trọng lượng táo bạo hơn (liên quan đến phần tử cha).

Văn bản cân nặng bình thường.

Văn bản trọng lượng nhẹ.

Văn bản trọng lượng nhẹ hơn (liên quan đến phần tử cha).

Văn bản in nghiêng.

Resize the browser window to see that its wid...

Không gian đơn

Thay đổi lựa chọn vào ngăn xếp phông chữ đơn của chúng tôi với

.text-truncate-container {
    width: 250px;
}
.text-truncate-container p {
    -webkit-line-clamp: 3;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

Đây là trong không gian đơn sắc

Resize the browser window to see that its wid...

Đặt lại màu sắc

Đặt lại một văn bản hoặc màu liên kết màu với

.text-truncate-container {
    width: 250px;
}
.text-truncate-container p {
    -webkit-line-clamp: 3;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

Resize the browser window to see that its wid...

Trang trí văn bản

Xóa trang trí văn bản với lớp

.text-truncate-container {
    width: 250px;
}
.text-truncate-container p {
    -webkit-line-clamp: 3;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

Resize the browser window to see that its wid...