Thêm dấu gạch nối vào văn bản với thuộc tính CSS hyphens

Giới thiệu

Sử dụng thuộc tính hyphens trong CSS, chúng ta có thể chỉ định cách thêm dấu gạch nối trong văn bản.

Ví dụ 1: hyphens none vs 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>

Kết quả

Đoạn mã trên sẽ cho kết quả sau:

Ví dụ 2: hyphens 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>

Kết quả

Đoạn mã trên sẽ cho kết quả sau: