[TIL_개발일기_210326] table width 고정, 자동 줄바꿈

table width 고정, 자동 줄바꿈

table에서 width를 따로 설정했음에도 불구하고, 컨텐츠의 내용이 길어지니 아래와 같이 width가 계속해서 늘어났다. 

 

 

 

이를 방지하기 위해서는 테이블의 사이즈에 맞게, 컨텐츠가 알아서 자동 줄바꿈을 해야한다. 

 

word-break: break-all; 속성을 사용하면 아래와 같이 알아서 줄바꿈을 할 수 있다. 

 

table > tr > td{
    word-break: break-all;
}

 

 

 

word-break는 텍스트가 자신의 content-box 밖으로 overflow할 때 줄을 어떻게 바꿀지 정해주는 속성이다.