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

Quảng cáo

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à:

Quảng cáo

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

Đã có app VietJack trên điện thoại, giải bài tập SGK, SBT Soạn văn, Văn mẫu, Thi online, Bài giảng....miễn phí. Tải ngay ứng dụng trên Android và iOS.

Theo dõi chúng tôi miễn phí trên mạng xã hội facebook và youtube:

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 vietjack.com: