CSS3 - ข้อความ

CSS3 มีคุณสมบัติพิเศษมากมายซึ่งจะเพิ่มเข้ามาในภายหลัง

text-overflow
word-wrap
word-break

มีคุณสมบัติที่ใช้บ่อยที่สุดต่อไปนี้ใน CSS3 -

ซีเนียร์	มูลค่าและรายละเอียด
1	text-align-last ใช้เพื่อจัดแนวบรรทัดสุดท้ายของข้อความ
2	text-emphasis ใช้เพื่อเน้นข้อความและสี
3	text-overflow ใช้เพื่อกำหนดวิธีการส่งสัญญาณเนื้อหาที่ล้นที่ไม่ได้แสดงให้กับผู้ใช้
4	word-break ใช้ในการแบ่งบรรทัดตามคำ
5	word-wrap ใช้ในการแบ่งเส้นและพันเข้ากับบรรทัดถัดไป

ข้อความล้น

คุณสมบัติ text-overflow กำหนดว่าเนื้อหาที่ล้นที่ไม่แสดงจะส่งสัญญาณไปยังผู้ใช้อย่างไร ตัวอย่างข้อความล้นแสดงดังต่อไปนี้ -

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

มันจะให้ผลลัพธ์ดังต่อไปนี้ -

CSS3 Word Breaking

ใช้เพื่อแบ่งบรรทัดโค้ดต่อไปนี้จะแสดงโค้ดตัวอย่างของการทำลายคำ

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

มันจะให้ผลลัพธ์ดังต่อไปนี้ -

การตัดคำ CSS

การตัดคำใช้เพื่อแบ่งบรรทัดและตัดเข้าสู่บรรทัดถัดไปโค้ดต่อไปนี้จะมีไวยากรณ์ตัวอย่าง -

p {
   word-wrap: break-word;
}