×

Xử lý text-overflow làm dấu 3 chấm trong text CSS

Hi guys !!!! , bài viết này mình sẽ chỉ các bạn cách làm dấu 3 chấm cuối dòng text-overflow.

Đây là demo lúc chưa xài text-overflow :

Chắc hẳn các bạn cũng đã thấy khối như trên ở những phần sản phẩm để lựa chọn của những web bán hàng rồi nhỉ , do kích thước màn hình có hạn nên 1 block(khối) chỉ được chiếm 1 kích thước nhất định mà nội dung nó thì lại quá dài nên sẽ thường rút ngắn nội dụng còn khoảng 2 3 dòng và ở cuối sẽ để dấu … , chắc hẳn các bạn sẽ thắc mắc làm thế nào để làm được như thế bằng CSS, trước khi code cho đoạn text đó thì mình sẽ cho các bạn xem code css demo khi chưa có text-overflow :

 .wrapper-content { // đây là khối bao bọc content và img ^^!
            margin: 100px auto;
            width: 400px;
            height: 500px;
            background-color: #f1f1f1;
            border: 1px solid black;
            padding: 10px;
            height: auto;
        }
        p { // đoạn này tý mình sẽ thêm text-overflow để hiện dấu 3 chấm }
            

Với đoạn code CSS ở trên thì nó sẽ hiện lên HTML(ảnh đầu tiên), và sau đây mình sẽ thêm text-overflow

.wrapper-content {
   margin: 100px auto;
   width: 400px;
    background-color: #f1f1f1;
    border: 1px solid black;
    padding: 10px;
    height: auto;
  }
p { width:100%;// chiều rộng bằng khối bao nó
    white-space: pre-wrap; 
    overflow: hidden; // ẩn các nội dung khi kích thước lớn hơn chiều rộng khối bên ngoài
    text-overflow: ellipsis; //thêm 3 dấu chấm ở cuối
    -webkit-line-clamp: 3;// số dòng muốn hiển thị
    -webkit-box-orient: vertical;
     display: -webkit-box;
  }

Và đây là demo HTML sau khi code :

text-overflow làm dấu 3 chấm trong text CSS
Đây chính là demo sau khi sử dụng text-overflow và nó đã ẩn các dòng tràn ra ngoài sau đó thêm dấu 3 chấm vào cuối dòng.

Bài viết đến đây của mình đã hết quá bài viết mình đã chỉ các bạn cách làm dấu 3 chấm trong CSS.Chúc các bạn học tập vui vẻ !!!.

Đánh giá bài viết bạn ơi!

763
Bài cùng chủ đề

3 Bình luận về “Xử lý text-overflow làm dấu 3 chấm trong text CSS

  1. Toàn đẹp trai khách

    Hay quá bạn

    2 Thích
  2. ihoan CÁO

    Hồi đó h mà anh chưa biết tới xài cách này á nha. Để bửa nào có gì dùng tới anh sẽ áp dụng vậy

    2 Thích
  3. Khuu hung khách

    Hay quá cảm on ban đã chia sẻ

    1 Thích