CSS tràn văn bản 2 dòng

Cách dễ nhất để giới hạn văn bản trong n dòng là sử dụngline-clamp. N có thể là bất kỳ số dương nào, nhưng hầu hết thời gian nó sẽ là hai hoặc ba dòng. Trên blog của tôi, tôi đang sử dụng line-clamp trong tất cả các thành phần loại bài đăng để đảm bảo rằng nó sẽ có cùng chiều cao với anh chị em

Rút ngắn một dòng

Để cắt bớt chỉ một dòng chúng ta có thể sử dụng

.truncate {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

Khoảng trắng và tràn sẽ thực hiện công việc, trong khi tràn văn bản sẽ thêm ba dấu chấm ở cuối dòng

hơn một dòng?

Cắt nhiều dòng

Cách dễ nhất là sử dụng đoạn mã này

.truncate {
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 2; /* number of lines to show */
           line-clamp: 2;
   -webkit-box-orient: vertical;
}

Chúng tôi đang sử dụng nhiều thuộc tính CSS

• tràn ra. ẩn giấu;

• tràn văn bản. dấu chấm lửng;

• trưng bày. -webkit-hộp;

• -webkit-line-kẹp. 2;

• kẹp dây. 2;

• -webkit-box-orient. thẳng đứng;

Hỗ trợ trình duyệt

Theo Tôi có thể sử dụng tính năng cắt bớt line-clamp được hỗ trợ bởi tất cả các trình duyệt chính ngoại trừ IE11 và Opera Mini

Hỗ trợ IE-11

Để hỗ trợ IE 11, chúng tôi có thể sử dụng max-height thay vì line-clamp

.truncate {
  display: block;
  max-height: 3.6em;
  line-height: 1.8em;
}

line-height được đặt thành 1,8em và max-height thành 3,6em. Các dòng tối đa được tính theo cách này. 3,6em chia 1,8em bằng 2 dòng

Bản demo Codepen để chơi cùng

Xem Cắt văn bản bằng bút - một dòng, cách hiện đại, hỗ trợ IE của Albert (@walickialbert) trên CodePen

Để tạo một trang web phản hồi, hầu hết mọi người đều phải đối mặt với thách thức xử lý văn bản. Vì vậy, ở đây tôi khám phá một số giải pháp để kiểm soát việc ngắt dòng văn bản nhiều dòng bằng dấu chấm lửng

Vì vậy, bạn có một số văn bản trong hộp có chiều rộng cố định, lượng văn bản có thể thay đổi nên chiều cao của các khối không đồng đều.
Trong CSS, bạn có thể cắt bớt văn bản thành một dòng bằng cách sử dụng.

tràn văn bản. dấu chấm lửng;

nhưng nếu bạn muốn cắt bớt nhiều dòng văn bản thì sao?

Dưới đây là mã cho nó

tôi có thể đọc được suy nghĩ của bạn. Vì vậy, ngay bây giờ bạn đang nghĩ về -webkit-line-clamp là gì?

Với tính năng kẹp dòng, bạn có thể chứa một khối văn bản vào một số dòng nhất định, vì vậy văn bản không bao giờ bị lệch ra khỏi dòng đó. Đó là LAKXAM REKHA cho văn bản;)

trong đoạn mã trên Chúng tôi xác định -webkit-line-clamp. 2; . Khi văn bản bắt đầu tràn ra ngoài 2 dòng, nó sẽ bị cắt bớt

Điều này phải được sử dụng kết hợp với màn hình. -webkit-hộp;

nó vẫn không hoạt động sau khi áp dụng tài sản trên. vì vậy, đừng lo lắng con tôi, tôi có một jugaad cho bạn. tất cả những gì bạn phải thêm là những thứ bên dưới trong css

vì vậy tất cả những gì bạn cần thêm là /*autoprefixer. tắt */ và /*autoprefixer. tắt */ trong nhận xét và ở giữa bạn có thể viết -webkit-box-orient. thuộc tính css dọc

Thuộc tính

.truncate {
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 2; /* number of lines to show */
           line-clamp: 2;
   -webkit-box-orient: vertical;
}

Cần có cả hai thuộc tính sau để tràn văn bản

• khoảng trắng. cái bọc;
• tràn ra. ẩn giấu;

Đưa ra bản chạy thử ❯

Giá trị mặc định. clipKế thừa. không có hoạt ảnh. không. Đọc về animatableVersion. Cú pháp CSS3JavaScript. mục tiêu. Phong cách. textOverflow="dấu chấm lửng" Hãy dùng thử

Hỗ trợ trình duyệt

Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính

Các số theo sau -o- chỉ định phiên bản đầu tiên hoạt động với tiền tố

Propertytext-overflow4. 06. 07. 03. 111. 0
9. 0 -o-

Cú pháp CSS

tràn văn bản. kẹp. dấu chấm lửng. chuỗi. ban đầu. thừa kế;

Giá trị tài sản

Giá trịMô tảDemoclipGiá trị mặc định. Văn bản bị cắt bớt và không thể truy cập đượcBản trình diễn ❯dấu chấm lửngHiển thị dấu chấm lửng (". ") để biểu thị văn bản đã cắt bớtDemo ❯stringKết xuất chuỗi đã cho để biểu thị văn bản đã cắt bớtĐặt thuộc tính này thành giá trị mặc định của nó. Đọc về khởi tạo Kế thừa thuộc tính này từ phần tử cha của nó. Đọc về thừa kế

Kẹp dây là gì?

Tôi có thể sử dụng dấu chấm lửng tràn văn bản không?

Làm cách nào để ngắt văn bản trong CSS?