CSS3 - Văn bản

CSS3 chứa một số tính năng bổ sung, được thêm vào sau này.

text-overflow
word-wrap
word-break

Sau đây là thuộc tính thường được sử dụng nhất trong CSS3:

Sr.No.	Giá trị & Mô tả
1	text-align-last Dùng để căn chỉnh dòng cuối cùng của văn bản
2	text-emphasis Được sử dụng để nhấn mạnh văn bản và màu sắc
3	text-overflow được sử dụng để xác định cách báo hiệu nội dung tràn không được hiển thị cho người dùng
4	word-break Dùng để ngắt dòng dựa trên từ
5	word-wrap Dùng để ngắt dòng và quấn vào dòng tiếp theo

Tràn văn bản

Thuộc tính tràn văn bản xác định cách báo hiệu nội dung bị tràn không được hiển thị cho người dùng. ví dụ mẫu về tràn văn bản được hiển thị như sau:

<html>
   <head>
      <style>
         p.text1 {
            white-space: nowrap; 
            width: 500px; 
            border: 1px solid #000000;
            overflow: hidden;
            text-overflow: clip;
         }
         p.text2 {
            white-space: nowrap; 
            width: 500px; 
            border: 1px solid #000000;
            overflow: hidden;
            text-overflow: ellipsis;
         }
      </style>
   </head>

   <body>
   
      <b>Original Text:</b>
   
      <p>
         Tutorials Point originated from the idea that there exists a class of 
         readers who respond better to online content and prefer to learn new 
         skills at their own pace from the comforts of their drawing rooms.
      </p>
      
      <b>Text overflow:clip:</b>
   
      <p class = "text1">
         Tutorials Point originated from the idea that there exists
         a class of readers who respond better to online content and prefer 
         to learn new skills at their own pace from the comforts of their 
         drawing rooms.
      </p>
      
      <b>Text overflow:ellipsis</b>
   
      <p class = "text2">
         Tutorials Point originated from the idea that there exists
         a class of readers who respond better to online content and 
         prefer to learn new skills at their own pace from the comforts 
         of their drawing rooms.
      </p>
      
   </body>
</html>

Nó sẽ tạo ra kết quả sau:

CSS3 Word Break

Được sử dụng để ngắt dòng, mã sau đây hiển thị mã mẫu của ngắt từ.

<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>line break at hyphens:</b>
      <p class = "text1">
         Tutorials Point originated from the idea that there exists a 
         class of readers who respond better to online content and prefer 
         to learn new skills at their own pace from the comforts of 
         their drawing rooms.
      </p>
      
      <b>line break at any character</b>
   
      <p class = "text2">
         Tutorials Point originated from the idea that there exists a 
         class of readers who respond better to online content and 
         prefer to learn new skills at their own pace from the comforts 
         of their drawing rooms.
      </p>
      
   </body>
</html>

Nó sẽ tạo ra kết quả sau:

Gói từ CSS

Gói từ được sử dụng để ngắt dòng và bọc vào dòng tiếp theo. Đoạn mã sau sẽ có cú pháp mẫu:

p {
   word-wrap: break-word;
}