CSS 텍스트 정렬 속성은 요소의 정당화 유형을 지정하는 데 도움이 됩니다. text-align 속성은 요소에 있는 텍스트의 수평 정렬을 설정합니다.
예
다음 예는 CSS text-justify 속성을 보여줍니다.
<!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> 출력
이것은 다음과 같은 결과를 생성합니다 -
예
<!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> 출력
이것은 다음과 같은 결과를 생성합니다 -
