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: 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 đó ...

CSS3 bổ sung thêm một số tính năng giúp bạn tạo hiệu ứng cho text:

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;
}

Follow fanpage của team https://www.facebook.com/vietjackteam/ hoặc facebook cá nhân Nguyễn Thanh Tuyền https://www.facebook.com/tuyen.vietjack để 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 code24h.com:

Bài liên quan

Tạo hiệu ứng động 3D với CSS3

Tạo hiệu ứng động đối với CSS3, có lẽ đối với nhiều người đã không còn quá xa lạ từ khi nó ra đời. Nhưng CSS3 không chỉ dừng lại ở có thế mà nó còn tạo hiệu ứng 3D cực kỳ đẹp mắt không khác gì mấy so với các phần mềm tạo ảnh động chuyên nghiệp. Nếu bạn nào vẫn chưa tin thì có thể xem demo bên dưới ...

Bùi Văn Nam viết 19:57 ngày 04/10/2018

[C#] Hướng dẫn sử dụng tạo hiệu ứng cho winform sử dụng Animator effect library

Hôm nay, mình xin hướng dẫn các bạn cách tạo hiệu ứng chuyển động trong lập trình C# . Bằng cách chúng ta sẽ sử dụng thư viện Animator C# hỗ trợ cho chúng ta công việc này. Các bạn có thể download thư viện này từ Nuget hoặc cuối bài viết của mình. ...

Trần Trung Dũng viết 00:58 ngày 02/10/2018

Hiệu ứng bóng đổ trong CSS3

Với CSS3 bạn có thể thêm hiệu ứng bóng đổ cho văn bản và các phần tử. Trong nội dung này chúng ta sẽ tìm hiểu các thuộc tính dưới đây: text-shadow box-shadow Trình duyệt hỗ trợ Các con số trong bảng xác định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ ...

Tạ Quốc Bảo viết 14:47 ngày 07/09/2018

WOW.js – Tạo hiệu ứng cho trang web khi cuộn chuột

Nếu các bạn đã từng ứng dụng Animate.css để tạo hiệu ứng cho trang web thì ắt hẳn các bạn có thể gặp một số vấn đề nho nhỏ. Đó là thư viện này sẽ mặc định tự kích hoạt các hiệu ứng khi trang web được tải xong. Dù cho khu vực đó trong trang vẫn chưa được cuộn tới. Điều này tuy không ảnh hưởng gì đến ...

Trịnh Tiến Mạnh viết 14:11 ngày 07/09/2018

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: 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 đó ...

Hoàng Hải Đăng viết 12:29 ngày 14/08/2018
0