Quản lý khoảng cách giữa từ với CSS word-spacing

Giới thiệu

Bằng cách định nghĩa thuộc tính word-spacing trong CSS, chúng ta có thể thiết lập lượng khoảng trắng giữa các từ.

Ví dụ 1: word-spacing lớn

<!DOCTYPE html> 
<html> 
<head> 
<style> 
div { 
  margin: 2%; 
  padding: 2%; 
  background-color: mediumorchid; 
  color: ivory; 
  word-spacing: 2.2cm; 
} 
div:last-of-type { 
  word-spacing: normal; 
} 
</style> 
</head> 
<body> 
<div>I Don't Care! I Love It!</div> 
<div>I Don't Care! I Love It!</div> 
</body> 
</html>

Kết quả

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

Ví dụ 2: Áp dụng cho article

<!DOCTYPE html> 
<html> 
<head> 
<style> 
article { 
  margin: 2%; 
  padding: 2%; 
  background-color: azure; 
  word-spacing: 2.2cm; 
} 
article:last-of-type { 
  word-spacing: normal; 
} 
</style> 
</head> 
<body> 
<article>tldr; this article doesn;t mean anything</article> 
<article>0123456789 is not a phone number</article> 
</body> 
</html>

Kết quả

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