Tạo hiệu ứng cho Text trong CSS3
CSS3 bổ sung thêm một số tính năng giúp bạn tạo hiệu ứng cho text: text-overflow word-wrap word-break Bảng dưới liệt kê một số thuộc tính thường được sử dụng trong CSS3: Giá trị Miêu tả text-align-last Căn chỉnh dòng văn bản cuối cùng text-emphasis Được sử ...
CSS3 bổ sung thêm một số tính năng giúp bạn tạo hiệu ứng cho text:
- text-overflow
- word-wrap
- word-break
Bảng dưới liệt kê một số thuộc tính thường được sử dụng trong CSS3:
| Giá trị | Miêu tả |
|---|---|
| text-align-last | Căn chỉnh dòng văn bản cuối cùng |
| text-emphasis | Được sử dụng để nhấn mạnh phần văn bản nào đó |
| text-overflow | Được sử dụng để xác định xem cách để báo cho người dùng biết rằng có phần nội dung bị tràn ra khỏi khối mà không được hiển thị |
| word-break | Được sử dụng để ngắt dòng dựa vào từ |
| word-wrap | Được sử dụng để ngắt dòng và bao vào trên dòng tiếp theo |
Thuộc tính text-overflow trong CSS3
Thuộc tính text-overflow được sử dụng để xác định xem cách để báo cho người dùng biết rằng có phần nội dung bị tràn ra khỏi khối mà không được hiển thị. Dưới đây là ví dụ minh họa cách sử dụng của thuộc tính text-overflow trong CSS3:
<html>
<head>
<style>
p.text1 {
white-space: nowrap;
awidth: 200px;
border: 1px solid #000000;
overflow: hidden;
text-overflow: clip;
}
p.text2 {
white-space: nowrap;
awidth: 200px;
border: 1px solid #000000;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<b>Doan van ban dau:</b>
<p>Tra loi bao chi hoi dau thang, Pho chu tich thuong truc VFF Tran Quoc Tuan va HLV Nguyen Huu Thang tung de cap toi
kha nang mo cua cho cau thu nhap tich len tuyen. Theo ong Tran Quoc Tuan, nhung cau thu nay neu dap ung duoc yeu cau
ve chuyen mon do HLV Nguyen Huu Thang dat rat hi deu co kha nang len tuyen.</p>
<b>Doan van bi tran ra khoi khu vuc chua: gia tri clip</b>
<p class="text1">Tra loi bao chi hoi dau thang, Pho chu tich thuong truc VFF Tran Quoc Tuan va HLV Nguyen Huu Thang tung de cap toi
kha nang mo cua cho cau thu nhap tich len tuyen. Theo ong Tran Quoc Tuan, nhung cau thu nay neu dap ung duoc yeu cau
ve chuyen mon do HLV Nguyen Huu Thang dat rat hi deu co kha nang len tuyen.</p>
<b>Doan van bi tran ra khoi khu vuc chua: gia tri ellipsis</b>
<p class="text2">Tra loi bao chi hoi dau thang, Pho chu tich thuong truc VFF Tran Quoc Tuan va HLV Nguyen Huu Thang tung de cap toi
kha nang mo cua cho cau thu nhap tich len tuyen. Theo ong Tran Quoc Tuan, nhung cau thu nay neu dap ung duoc yeu cau
ve chuyen mon do HLV Nguyen Huu Thang dat rat hi deu co kha nang len tuyen.</p>
</body>
</html>
Kết quả là:
Thuộc tính word-break trong CSS3
Được sử dụng để ngắt dòng, ví dụ sau minh họa cách sử dụng thuộc tính word-break trong CSS3:
<html>
<head>
<style>
p.text1 {
awidth: 140px;
border: 1px solid #000000;
word-break: keep-all;
}
p.text2 {
awidth: 140px;
border: 1px solid #000000;
word-break: break-all;
}
</style>
</head>
<body>
<b>Vi du ve Line Break (ngat dong) tai dau gach noi (-)</b>
<p class="text1">Tra loi bao chi hoi dau thang, Pho chu tich thuong- truc VFF Tran Quoc Tuan va HLV Nguyen Huu Thang tung de cap toi
kha nang mo cua cho cau thu nhap tich len tuyen. Theo ong Tran Quoc Tuan, nhung cau thu nay neu dap ung duoc yeu cau
ve chuyen mon do HLV Nguyen Huu Thang dat rat hi deu co kha nang len tuyen.</p>
<b>Vi du Line Break tai bat ky ky tu nao</b>
<p class="text2">Tra loi bao chi hoi dau thang, Pho chu tich thuong truc VFF Tran Quoc Tuan va HLV Nguyen Huu Thang tung de cap toi
kha nang mo cua cho cau thu nhap tich len tuyen. Theo ong Tran Quoc Tuan, nhung cau thu nay neu dap ung duoc yeu cau
ve chuyen mon do HLV Nguyen Huu Thang dat rat hi deu co kha nang len tuyen.</p>
</body>
</html>
Kết quả là:
Thuộc tính word-wrap trong CSS3
Cú pháp sau minh họa cách sử dụng của thuộc tính word-wrap trong CSS3.
p {
word-wrap: break-word;
}
Loạt bài hướng dẫn Học CSS cơ bản và nâng cao của chúng tôi dựa trên nguồn tài liệu của: và
Follow fanpage của team hoặc facebook cá nhân Nguyễn Thanh Tuyền để tiếp tục theo dõi các loạt bài mới nhất về Java,C,C++,Javascript,HTML,Python,Database,Mobile.... mới nhất của chúng tôi.
Bài học CSS phổ biến khác tại vietjack.com:
