데이터 그리드에는 종종 열에 표시하기에는 내용이 너무 긴 셀이 있습니다.

FlexGrid는 이 문제를 두 가지 방법으로 완화합니다.

1. 셀 옆에 더 많은 내용이 있음을 나타내기 위해 텍스트 옆에 줄임표 기호가 표시됩니다.
   
2. 사용자가 내용에 맞게 열 크기를 조정하거나 크기를 자동 조정할 수 있습니다.

그러나 때로는 이 방법들로는 충분하지 않습니다. FlexGrid를 사용하여 Excel 스타일로 overflow 셀을 구현하는 방법에 대해 자세히 알아볼 수 있습니다.

Overflowing Cell 조작에서 솔루션을 테스트 할 수 있습니다 .

이 솔루션은 빈 셀이 많은 그리드에 적합합니다. Excel에서 스프레드시트를 만들 때 셀이 비어있는 경우가 많은데, 불행히도 일반적으로 데이터에 바인딩 된 그리드를 처리 할 때는 모든 셀에 내용이 있는 경우가 많습니다.

여기에서는 다른 접근 방식을 제안합니다. 셀을 인접한 열로 "Spill" 하는 대신, 일부 CSS를 사용하여 마우스를 셀 위로 가져갈 때 셀 내용을 표시 할 수 있습니다.

예를 들면 다음과 같습니다.

이 예에서 대부분의 국가 이름은 너무 길어서 "From" 및 "To" 열에 맞지 않습니다. 그러나 사용자가 마우스를 셀 위에 놓을 때 전체 셀 텍스트를 표시하는 CSS를 추가했습니다.

이를 통해 ,사용자는 열 크기를 조정하지 않고도 전체 셀 내용을 빠르고 쉽게 읽을 수 있습니다.

샘플 실행하기 - Hover 시 FlexGrid Overflow 

샘플에서 볼 수 있듯이 CSS text-shadow 속성을 사용하여 이 작업을 수행했습니다.

.wj-flexgrid {
  max-height: 250px;
  margin-bottom: 12px;
  --overflow-color: yellow; 
}
.wj-flexgrid .wj-cells .wj-cell:hover {
  overflow: visible;
  z-index: 6;
  color: black;
  text-shadow: /* Many shadows blur out the area around the text */
    0 0 1px var(--overflow-color),
    0 0 2px var(--overflow-color),
    0 0 3px var(--overflow-color),
    0 0 4px var(--overflow-color),
    0 0 5px var(--overflow-color),
    0 0 6px var(--overflow-color),
    0 0 7px var(--overflow-color),
    0 0 8px var(--overflow-color),
    0 0 9px var(--overflow-color),
    0 0 10px var(--overflow-color)
}

CSS 변수를 사용하여 overflowing 셀의 배경(노랑색)을 지정했습니다. 따라서 text-shadow 값을 지정할 때 배경을 더 쉽게 반복할 수 있습니다. 이 예제에서는 10개의 그림자를 사용하여 텍스트 주위의 영역을 흐리게 하고 인접한 셀의 내용을 덮었습니다.

text-shadow 속성에 대해 더 자세히 알아보세요. - CSS text-shadow 속성

JavaScript는 필요하지 않으며 CSS만 조금 적용하면 됩니다.

이 방법은 그리드 셀에 적용되지만 다른 유형의 내용(트리 노드 및 탭 헤더)에도 사용할 수 있습니다.