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ử 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; 
            width: 200px; 
            border: 1px solid #000000;
            overflow: hidden;
            text-overflow: clip;
         }
         p.text2 {
            white-space: nowrap; 
            width: 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 {
            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>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: TutorialspointW3Schools

Follow https://www.facebook.com/vietjackteam/ để 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.