Multiline ellipsis chỉ với CSS

Multiline ellipsis chỉ với CSS

Cắt ngắn một đoạn text gồm nhiều dòng và thay thế vào đó dấu ba chấm thực sự là một công việc không dễ dàng:

  • Sử dụng overflow: hidden làm ẩn đi đoạn text thừa nhưng không thể hiện được “có một đoạn text đã bị cắt”
  • text-overflow: ellipsis chỉ làm việc với một dòng
  • Các phương pháp sử dụng javascript không phải là sự lựa chọn tốt vì ta phải “relayout” mỗi khi kích thước của container hoặc phần nội dung thay đổi
  • Roman Rudenko đã giới thiệu một phương pháp để thực hiện điều này chỉ bằng CSS. Bạn có thể xem chi tiết tại đây

    Dưới đây là mã CSS và cách sử dụng:

    #example {
    	height: 123px;
    	line-height: 25px;
    	margin: 10px; padding: 10px;
    	border: 1px solid #d0d0d0; 
    	border-radius: 5px;
    }
    .ellipsis {
    	overflow: hidden;			
    }
    
    .ellipsis:before {
    	content:"";
    	float: left;
    	width: 5px; height: 100%; 
    }
    
    .ellipsis > *:first-child {
    	float: right;
    	width: 100%;
    	margin-left: -5px; }		
    
    .ellipsis:after {
    	content: "\02026";  
    	box-sizing: content-box;
    	-webkit-box-sizing: content-box;
    	-moz-box-sizing: content-box;
    	float: right; position: relative;
    	top: -25px; left: 100%; 
    	width: 3em; margin-left: -3em;
    	padding-right: 5px;
    	text-align: right;
    	background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(white), color-stop(50%, white));
    	background: -moz-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);			
    	background: -o-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
    	background: -ms-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
    	background: linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white); 
    }
    
    <div class="ellipsis" id="example">
    	<p>“Ông Smith” Brad Pitt thừa nhận 6 đứa con của mình đều mong tới ngày bố mẹ kết hôn.....</p>
    </div>
    
    Khi trích dẫn bài viết từ tek.eten.vn, xin vui lòng ghi rõ nguồn. Chúng tôi sẽ rất cảm ơn bạn!