글의 길이가 길지 않을 때 justify 속성이 잘 먹지 않는데,
해당 요소에 width 값과 text-align: justify를 주고,
가상요소인 :after가 핵심인데,
display: inline-block 및 width: 100%를 주면 justify 속성을 적용할 수 있다.
아래 코드를 참고해보자.
코드
<!DOCTYPE html>
<html>
<head>
<style>
.text-justify{
width: 120px;
text-align: justify;
}
.text-justify:after{
content: "";
display: inline-block;
width: 100%;
}
</style>
</head>
<body>
<ul>
<li>
<span class="text-justify">이 름</span>
</li>
<li>
<span class="text-justify">휴 대 전 화</span>
</li>
<li>
<span class="text-justify">이 메 일</span>
</li>
</ul>
</body>
</html>
※ 주의: 강제로 준 width보다 글자의 길이가 큰 경우를 깨질 수 있음~
※ 수동으로 길이를 맞춰야하다 보니
728x90
반응형
'WWWEB > CSS' 카테고리의 다른 글
| 최근 네이버 CSS 초기화 코드 (mo/pc) (0) | 2023.05.25 |
|---|---|
| max-height를 이용한 부드럽게 열리는 더보기 (0) | 2023.05.10 |
| [css] 모서리 종이 말려지는 효과를 만들어봄. (쏘 이지~) (2) | 2023.05.08 |
| [css] clip-path를 이용한 텍스트 안 wave 애니메이션 (0) | 2023.04.26 |
| [ css ] position: sticky가 안 먹는 경우, 적용 조건 (0) | 2023.03.28 |
| [css] 말줄임 여러 줄 예시 (1) | 2023.02.14 |
| css3 카드 뒤집기 효과 (backface-visibility: hidden;) (1) | 2023.01.31 |
| CSS grid 간략 공부 (0) | 2023.01.10 |
댓글