Thuộc tính text-overflow trong CSS

Thuộc tính text-overflow để thiết lập ứng sử khi dòng text dài vượt quá chiều rộng phần tử (ứng sử này cũng chỉ xảy ra khi không tự ngắt xuống dòng do thiết lập thuộc tính white-space có giá trị nowrap và thiết lập tràn overflow là hidden)

text-overflow: clip | ellipsis

Giá trị nhận cụ thể:

clip

Khi text-overflow có giá trị clip là trường hợp mặc định, khi nó nội dung dòng text bị tràn sẽ bị cắt bỏ không hiện thị.

<style>
    .example1 {
        border: 1px solid red;
        width: 200px;
        
        /* Thiết lập để có ảnh hưởng của text-overflow */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: clip;
    }
</style>

<p class="example1">Dòng chữ này không tự xuống dòng (nowrap), nằm trong phần tử rộng 200px</p>

Dòng chữ này không tự xuống dòng (nowrap), nằm trong phần tử rộng 200px

ellipsis

Khi text-overflow có giá trị ellipsis thì nội dung tràn bị ẩn và tự thêm vào dấu ba chấm ...

<style>
    .example2 {
        border: 1px solid red;
        width: 200px;
        
        /* Thiết lập để có ảnh hưởng của text-overflow */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
</style>

<p class="example2">Dòng chữ này không tự xuống dòng (nowrap), nằm trong phần tử rộng 200px</p>

Dòng chữ này không tự xuống dòng (nowrap), nằm trong phần tử rộng 200px