째의 개발 기록방

text-align / word-break 속성 본문

Front End/HTML 5, CSS 3

text-align / word-break 속성

째린이 2021. 4. 5. 15:51
  •  text-align 속성

         inline 이나 inline-block 요소에서만 수직정렬을 위해 사용가능

 

 

 

  • word-break 속성
<p>
  <span>
  		내가 보려고 만든 javascript 복습 중 입니다.
        내가 보려고 만든 javascript 복습 중 입니다.
        내가 보려고 만든 javascript 복습 중 입니다.
  </span>
</p>
.wrap p span{
    display: inline-block;
    width: 50%;
    word-break: break-all;  /*글자 기준으로 줄바꿈합니다.*/
    word-break: break-word; /*요소의 경계에서 break point가 아니어도 줄바꿈을 합니다.*/
    word-break: keep-all;   /*단어 기준으로 줄바꿈합니다.*/
    word-break: initial;    /*기본값으로 설정합니다. */
    word-break: inherit     /*부모 요소의 속성값을 상속받습니다.*/
   }

↑word-break : break-all 글자 기준으로 줄바꿈합니다.

↑word-break : break-all  / 글자 기준으로 줄바꿈합니다.

↑word-break : keep-all 단어 기준으로 줄바꿈합니다.

↑word-break : keep-all  / 단어 기준으로 줄바꿈합니다.

↑word-break : break-word 요소의 경계에서 break point가 아니어도 줄바꿈을 합니다.

word-break: break-word  / 요소의 경계에서 break point가 아니어도 줄바꿈을 합니다.

'Front End > HTML 5, CSS 3' 카테고리의 다른 글

[html5,css3] 웹 접근성 / WAI-ARIA  (0) 2022.05.11