JSFiddle - React, Tailwind, and code Playground

by Bang Nguyen

HTML

<!DOCTYPE html>
<html>
<title>Panpic - CSS tiêu đề hiển thị 1 dòng</title>
<head>
    <style>
        * {
            margin: 20px;
        }
         
        div {
            width: 500px;
            height: 20px;
            border: 2px red solid;
        }
         
        .property1 {
            white-space: nowrap;
        }
         
        .property1and2 {
            white-space: nowrap;
            overflow: hidden;
        }
         
        .property1and2and3 {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>
</head>
 
<body>
    <h1>
       Panpic
    </h1>
    <h3>
        Thuộc tính - xác định dòng hiển thị
    </h3>
    <div>
        Sau khi thiết kế và xây dựng hoàn thành website cho công ty, cảm giác ban đầu bạn có thể thỏa mãn ngồi ngắm thành quả của mình
    </div>
    <br/>
    <h3>Thuộc tính: Với khoảng trăng phía sau đối tượng</h3>
    <div class='property1'> 
        Sau khi thiết kế và xây dựng hoàn thành website cho công ty, cảm giác ban đầu bạn có thể thỏa mãn ngồi ngắm thành quả của mình
    </div>
     <br/>
    <h3>Thuộc tính: Cắt tiều đề 1 dòng và ẩn đi</h3>
    <div class='property1and2'>
        Sau khi thiết kế và xây dựng hoàn thành website cho công ty, cảm giác ban đầu bạn có thể thỏa mãn ngồi ngắm thành quả của mình
    </div>
     <br/>
    <h3>Thuộc tính: Cắt tiêu đề 1 dòng và ẩn đi với dấu chấm</h3>
    <div class='property1and2and3'> 
        Sau khi thiết kế và xây dựng hoàn thành website cho công ty, cảm giác ban đầu bạn có thể thỏa mãn ngồi ngắm thành quả của mình
    </div>
</body>
</html>