คุณสมบัติการเว้นวรรคคำ CSS ใช้เพื่อระบุช่องว่างระหว่างคำขององค์ประกอบ
ไวยากรณ์
ไวยากรณ์ของคุณสมบัติการเว้นวรรคคำ CSS มีดังต่อไปนี้ -
Selector {
word-spacing: /*value*/
} ตัวอย่าง
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงคุณสมบัติการเว้นวรรคคำ CSS -
<!DOCTYPE html>
<html>
<head>
<style>
div {
display: flex;
float: left;
padding: 10px;
background-color: salmon;
}
div > div {
word-spacing: 30px;
width: 340px;
height: 140px;
border-radius: 5%;
box-shadow: inset 0 0 15px blueviolet;
}
</style>
</head>
<body>
<div>
<div>
Magento is an open source E-commerce software, created by Varien Inc., which is useful for
online business. It has a flexible modular architecture and is scalable with many control
options that is helpful for users.</div>
</div>
</body>
</html> ผลลัพธ์
สิ่งนี้ให้ผลลัพธ์ต่อไปนี้ -
ตัวอย่าง
<!DOCTYPE html>
<html>
<head>
<style>
q {
display: flex;
padding: 10px;
word-spacing: 6em;
background-color: orange;
font-size: 1.2em;
}
</style>
</head>
<body>
<h2>What is Java?</h2>
According to Java's official documentation,
<hr>
<q cite="https://www.java.com/en/download/faq/whatis_java.xml">Java is a programming language and computing platform first released by Sun Microsystems in 1995.</q>
</body>
</html> ผลลัพธ์
สิ่งนี้ให้ผลลัพธ์ต่อไปนี้ -
