Ngắt dòng dựa trên từ với CSS (word-break)

Giới thiệu

Sử dụng thuộc tính word-break để ngắt dòng dựa trên từ với CSS.

Ví dụ

<html>
<head>
    <style>
        p.text1 {
            width: 140px;
            border: 1px solid #000000;
            word-break: keep-all;
        }
        p.text2 {
            width: 140px;
            border: 1px solid #000000;
            word-break: break-all;
        }
    </style>
</head>
<body>
    <b>Ngắt dòng tại dấu gạch nối:</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>Ngắt dòng tại bất kỳ ký tự nào:</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ả