Computer >> Hướng Dẫn Máy Tính >  >> Lập Trình >> CSS

Xác định cách hiển thị nội dung tràn với CSS (text-overflow)

Giới thiệu

Thuộc tính text-overflow xác định cách nội dung tràn không hiển thị được báo hiệu cho người dùng.

Ví dụ

<html>
<head>
    <style>
        p.text1 {
            white-space: nowrap;
            width: 200px;
            border: 1px solid #000000;
            overflow: hidden;
            text-overflow: clip;
        }
        p.text2 {
            white-space: nowrap;
            width: 200px;
            border: 1px solid #000000;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>
</head>
<body>
    <b>Văn bản gốc:</b>
    <p>Tutorials Point xuất phát từ ý tưởng rằng tồn tại một lớp người đọc phản ứng tốt hơn với nội dung trực tuyến và thích học kỹ năng mới ở tốc độ riêng từ sự thoải mái của phòng khách.</p>
    <b>Text overflow: clip:</b>
    <p class="text1">Tutorials Point xuất phát từ ý tưởng rằng tồn tại một lớp người đọc phản ứng tốt hơn với nội dung trực tuyến và thích học kỹ năng mới ở tốc độ riêng từ sự thoải mái của phòng khách.</p>
    <b>Text overflow: ellipsis:</b>
    <p class="text2">Tutorials Point xuất phát từ ý tưởng rằng tồn tại một lớp người đọc phản ứng tốt hơn với nội dung trực tuyến và thích học kỹ năng mới ở tốc độ riêng từ sự thoải mái của phòng khách.</p>
</body>
</html>

Kết quả

Xác định cách hiển thị nội dung tràn với CSS (text-overflow)