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 : keep-all / 단어 기준으로 줄바꿈합니다.

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