CSS (Cascading Style Sheets) là cơ chế dùng để thêm style cho tài liệu web. Thông qua CSS, ta có thể áp dụng nhiều hiệu ứng cho văn bản. Các hiệu ứng này giúp tăng tính thẩm mỹ và cải thiện trải nghiệm người dùng trên trang web.
Trong bài viết này, chúng ta sẽ tìm hiểu các thuộc tính CSS quan trọng để tạo hiệu ứng văn bản. Các thuộc tính này bao gồm:
- text-overflow
- word-wrap
- word-break
- writing-mode
Hãy cùng tìm hiểu chi tiết về từng thuộc tính này nhé!
. Text-Overflow
Thuộc tính text-overflow trong CSS giúp xử lý văn bản vượt quá chiều rộng của vùng chứa. Nó xác định cách hiển thị nội dung bị tràn khi văn bản quá dài.
Syntax:
element {
text-overflow: clip | ellipsis;
//CSS Property
}Values:
- clip: Đây là giá trị mặc định. Nó cắt văn bản ở mép của vùng nội dung. Thậm chí nó có thể cắt ngang giữa các ký tự.
- ellipsis: Thay thế phần văn bản bị cắt bằng dấu chấm lửng (...). Dấu chấm lửng hiển thị bên trong vùng nội dung. Nó làm giảm lượng văn bản hiển thị.
Example 1: text-overflow: clip
HTML<!DOCTYPE html>
<html>
<head>
<style>
div.geek {
white-space: nowrap;
width: 200px;
overflow: hidden;
border: 1px solid #000000;
font-size: 20px;
text-overflow: clip;
}
div.geek:hover {
overflow: visible;
}
</style>
</head>
<body style="text-align: center">
<h1 style="color:green">
GeeksforGeeks
</h1>
<h2>
text-overflow: clip
</h2>
<div class="geek">
A Computer Science portal for geeks.
</div>
</body>
</html>
Output:
Example 2: text-overflow: ellipsis
HTML<!DOCTYPE html>
<html>
<head>
<style>
div.geek {
white-space: nowrap;
width: 200px;
overflow: hidden;
border: 1px solid #000000;
font-size: 20px;
text-overflow: ellipsis;
}
div.geek:hover {
overflow: visible;
}
</style>
</head>
<body style="text-align: center">
<h1 style="color:green">
GeeksforGeeks
</h1>
<h2>
text-overflow: ellipsis
</h2>
<div class="geek">
A Computer Science portal for geeks.
</div>
</body>
</html>
Output:
. Word Wrap
Thuộc tính word-wrap trong CSS xác định việc trình duyệt có được phép ngắt dòng trong từ hay không. Điều này áp dụng khi một từ quá dài so với vùng chứa của nó. Nếu một từ quá dài so với một vùng, nó sẽ tràn ra ngoài.Syntax:
element {
word-wrap: break-word;
//CSS Property
}Example:
html<!DOCTYPE html>
<html>
<head>
<title>word wrap</title>
<style>
p {
width: 11em;
border: 1px solid #000000;
text-align: left;
font-size: 20px;
}
p.test {
word-wrap: break-word;
}
</style>
</head>
<body style="text-align: center;">
<h2>Without word-wrap</h2>
<p>
This paragraph contains a very long word:
geeksforgeeksforgeeksforgeeksforgeeks
</p>
<h2>With word-wrap</h2>
<p class="test">
This paragraph contains a very long word: geeks
forgeeksforgeeksforgeeksforgeeks
</p>
</body>
</html>
Output:
. Word Breaking
Thuộc tính word-break trong CSS thiết lập việc ngắt dòng ở những vị trí mà văn bản tràn ra ngoài hộp nội dung. Nó chỉ định các quy tắc ngắt dòng.
Syntax:
element {
word-break: keep-all | break-all;
//CSS Property
}- break-all: Ngắt từ ở những điểm tùy ý để ngăn tràn.
- keep-all: Ngăn việc ngắt từ trừ khi có các ngắt dòng rõ ràng.
Example: word-break: break-all
HTML<!DOCTYPE html>
<html>
<head>
<title>word-break: break-all</title>
<style>
p.geek {
width: 140px;
border: 1px solid #000000;
word-break: break-all;
text-align: left;
font-size: 20px;
}
</style>
</head>
<body style="text-align: center;">
<h2>word-break: break-all</h2>
<p class="geek">
A computer science portal for geeks
</p>
</body>
</html>
Output:
Example: word-break: keep-all
HTML<!DOCTYPE html>
<html>
<head>
<title>word-break: keep-all</title>
<style>
p.geek {
width: 140px;
border: 1px solid #000000;
word-break: keep-all;
text-align: left;
font-size: 20px;
}
</style>
</head>
<body style="text-align: center;">
<h2>word-break: keep-all</h2>
<p class="geek">
A computer science portal for geeks
</p>
</body>
</html>
Output:
. Writing Mode
Thuộc tính writing-mode xác định văn bản được hiển thị theo chiều ngang (mặc định) hay chiều dọc.
Syntax:
The writing-mode property defines whether text is displayed horizontally (default) or vertically.element {
writing-mode: horizontal-tb | vertical-rl;
//CSS Property
}- horizontal-tb: Đây là giá trị mặc định của thuộc tính. Tức là văn bản được đọc từ trái sang phải và từ trên xuống dưới. Dòng ngang tiếp theo được đặt bên dưới dòng trước đó.
- vertical-rl: Trong thuộc tính này văn bản được đọc từ phải sang trái và từ trên xuống dưới. Dòng dọc tiếp theo được đặt ở bên trái dòng trước đó.
Example: writing-mode: horizontal-tb
HTML<!DOCTYPE html>
<html>
<head>
<title>writing-mode: horizontal-tb</title>
<style>
p.geek {
writing-mode: horizontal-tb;
font-size: 18px;
}
</style>
</head>
<body style="text-align: center;">
<h1>writing-mode: horizontal-tb</h1>
<p class="geek">
A computer science portal for geeks.
</p>
</body>
</html>
Output:
Example: writing-mode: vertical-rl
HTML<!DOCTYPE html>
<html>
<head>
<title>writing-mode: vertical-rl</title>
<style>
span.test2 {
writing-mode: vertical-rl;
font-size: 18px;
}
</style>
</head>
<body style="text-align: center;">
<h1>writing-mode: vertical-rl</h1>
<p class="geek"></p>
<p>
computer science <span class="test2">portal </span>
for geeks.
</p>
</body>
</html>
Output:
