table data 가 너무 길 경우 해결방법 (table over-flow text in cell)

table data 가 너무 길어서 생각했던 디자인과 달라지는 케이스가 발생할 수 있다.

 

해결하려고 방법을 찾아보고 정리해보았다.

 

1. CSS 로 조정

max-width: 200px;
overflow: hidden;
text-overflow: ellipsis;

디자인에 맞게 td 의 크기를 제한하고

overflow: hidden 옵션으로 max-width 를 벗어나는 내용을 숨긴다.

 

text-overflow: ellipsis; 옵션을 추가하면 끝에 잘리는 부분을 ... 으로 표시해준다.

 

 

2. td 안의 내용을 일부만 표현

<td style="text-align:left;" v-if="result.message.length < 40">{{result.message}}</td>
<td style="text-align:left;" v-else>{{result.message.substring(0,40)+"...."}}</td>

v-if else 구문을 이용해서 원하는 만큼의 내용만 표시한다.

실 적용에는 후자를 사용했다.