คุณสมบัติ text-justify ใน CSS ช่วยระบุประเภทการจัดเรียงข้อความสำหรับองค์ประกอบหนึ่งๆ ส่วนคุณสมบัติ text-align ใช้ตั้งค่าการจัดแนวข้อความแนวนอนในองค์ประกอบ
ตัวอย่างที่ 1: การใช้ inter-character
<!DOCTYPE html>
<html>
<head>
<style>
article {
margin: 3%;
background-color: peachpuff;
text-align: justify;
}
p:first-of-type{
text-justify: inter-character;
background-color: moccasin;
}
</style>
</head>
<body>
<article>
<p>Nullam in fringilla ex, at sagittis erat. Praesent imperdiet augue at ante tempor, eu condimentum tellus consectetur. Mauris rutrum, lectus quis porta bibendum, arcu neque dictum orci, sed volutpat ipsum risus in ex. Suspendisse potenti. Nam rhoncus ultricies nisi pulvinar rutrum. Mauris ullamcorper interdum urna a vulputate. Quisque dolor tortor, vehicula in odio eu, fringilla rutrum est. Nunc viverra congue aliquam. Ut volutpat magna ipsum, in interdum velit mollis ac. </p>
<p>Nullam in fringilla ex, at sagittis erat. Praesent imperdiet augue at ante tempor, eu condimentum tellus consectetur. Mauris rutrum, lectus quis porta bibendum, arcu neque dictum orci, sed volutpat ipsum risus in ex. Suspendisse potenti. Nam rhoncus ultricies nisi pulvinar rutrum. Mauris ullamcorper interdum urna a vulputate. Quisque dolor tortor, vehicula in odio eu, fringilla rutrum est. Nunc viverra congue aliquam. Ut volutpat magna ipsum, in interdum velit mollis ac.</p>
</article>
</body>
</html>
ผลลัพธ์
จะได้ผลลัพธ์ดังนี้:
ตัวอย่างที่ 2: การใช้กับ definition list
<!DOCTYPE html>
<html>
<head>
<style>
dl {
margin: 3%;
background-color: lightcoral;
text-align: justify;
}
#example{
text-justify: inter-character;
background-color: snow;
}
</style>
</head>
<body>
<dl>
<dt> Quisque dolor tortor, vehicula in odio eu, fringilla rutrum est.</dt>
<dd>Nunc viverra congue aliquam. <p id="example">Nullam in fringilla ex, at sagittis erat. Praesent imperdiet augue at ante tempor, eu condimentum tellus consectetur.</p> </dd>
</dl>
<dl>
<dt> Quisque dolor tortor, vehicula in odio eu, fringilla rutrum est.</dt>
<dd>Nunc viverra congue aliquam. <p>Nullam in fringilla ex, at sagittis erat. Praesent imperdiet augue at ante tempor, eu condimentum tellus consectetur.</p> </dd>
</dl>
</body>
</html>
ผลลัพธ์
จะได้ผลลัพธ์ดังนี้:
