การเพิ่มเครื่องหมายยูนิโค้ด (Hyphens) ด้วยคุณสมบัติ hyphens ใน CSS

ด้วยคุณสมบัติ hyphens ใน CSS เราสามารถระบุวิธีการเพิ่มเครื่องหมายยูนิโค้ด (hyphens) ในข้อความได้

ตัวอย่างที่ 1: การเปรียบเทียบ none และ manual

<!DOCTYPE html> 
<html> 
<head> 
<style> 
div { 
  width: 20%; 
  border: 2px groove lime; 
  margin: 10px; 
  padding: 10px; 
  hyphens: none; 
  -webkit-hyphens: none; 
  -ms-hyphens: none; 
} 
div:last-of-type { 
  hyphens: manual; 
  -webkit-hyphens: manual; 
  -ms-hyphens: manual; 
} 
</style> 
</head> 
<body> 
<div> abcdefghi­jklmnopqrstuvwxyz </div> 
<div> abcdefghi­jklmnopqrstuvwxyz </div> 
</body> 
</html>

ผลลัพธ์

จะได้ผลลัพธ์ดังนี้:

ตัวอย่างที่ 2: การใช้งาน auto

<!DOCTYPE html> 
<html> 
<head> 
<style> 
div { 
  margin: 10px; 
  padding: 10px; 
  width: 15%; 
  border: 2px ridge darkblue; 
  background-color: peachpuff; 
  -webkit-hyphens: auto; 
  -ms-hyphens: auto; 
  hyphens: auto; 
} 
</style> 
</head> 
<body> 
<div> abcdefghijklmno-pqrstuvw-xyz </div> 
<div> abcdefghi-jklmnopqrstuvw-xyz </div> 
</body> 
</html>

ผลลัพธ์

จะได้ผลลัพธ์ดังนี้: