Thuộc tính tràn văn bản được sử dụng trong CSS3 để xác định cách báo hiệu nội dung bị tràn không được hiển thị cho người dùng
Sau đây là mã để xử lý tràn văn bản trong CSS3 -
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
div {
white-space: nowrap;
width: 100px;
overflow: hidden;
border: 1px solid #3008c0;
margin: 10px;
padding: 10px;
}
.clip {
text-overflow: clip;
}
.ellipsis {
text-overflow: ellipsis;
}
</style>
</head>
<body>
<h1>Handling text overflow example</h1>
CLIP:
<div class="clip">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum, beatae.
</div>
ELLIPSES:
<div class="ellipsis">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum, beatae.
</div>
</body>
</html> Đầu ra
Đoạn mã trên sẽ tạo ra kết quả sau -
