GWT - 레이블에 텍스트를 올바르게 배치하지 않았습니까?

Question

LayoutPanels 안에있는 ScrollPanel 안에 FlexTable의 셀 내에 레이블이 있습니다. ScrollPanel (및 그것의 부모 LayoutPanels)의 크기는 사용자 장치의 창의 크기에 따라 동적으로 설정됩니다 (따라서 정확한 CSS 크기 조정은 사용되지 않습니다). FlexTable, 셀이며 라벨의 너비는 100%입니다. 또한 FlexTable은 fixed 테이블 레이아웃으로 설정됩니다. 그리고 라벨에는 단어 감싸기 설정이 break-word으로 주어집니다. 대부분의 경우이 작동합니다. 짧은 단어가있는 문장은 문제없이 다음 줄로 감싸이고 Label은 표 셀이 들어있는 것과 같은 크기로 남습니다. 그러나 단어가 두 줄로 분리되어야 할 때 (일반적으로 페이지에 대한 링크가 여기에 배치되기 때문에 자주 발생 함) Label의 너비가 자동으로 Label의 너비를 포함하는 셀의 크기를 초과하여 확장됩니다. 이 GWT 레이블 자체를 크기 조정 결과로 알지만이 방지하는 방법을 잘 모르겠습니다. 나는 단어 분리를 break-all으로 설정하려고 시도했으나 짧은 단어가 줄 바꿈에 도달하여 ("this"를 "th"및 "is"와 같이) 어리석게 만듭니다. 어쨌든 나는 GWT Label이 셀을 포함하고있는 너비의 100 % 만 강제로 설정할 수 있으며이 설정을 계속 동적으로 유지하면서 그 너머까지 확장시키지 않을 수 있습니까? 많이 고마워!

Answer 1

분명히 백분율로 인해 문제가 발생합니다. 너비에 px 값을 지정하면 긴 문자열이 한도에 도달하면 랩됩니다. 물론 동적으로 크기를 지정하기 때문에이 px 값을 좀 더 복잡한 방식으로 가져와야합니다. 이를 수행하는 방법은 Window.getClientWidth()을 사용하여 사용자 화면의 너비를 확인한 다음이 비율을 사용할 때마다 CSS에서 사용할 백분율을 기준으로 수동으로 px 값을 계산해야합니다 100 픽셀 중 33 %가 33 픽셀을 제공하므로 여분의 픽셀을 추가해야하는시기를 수동으로 확인해야 누락되지 않습니다. 그런 다음 스크롤 패널의 경우 스크롤 막대를 제외한 패널 너비를 빼서 빼낼 수 있습니다 현재 패널 너비의 NativeVerticalScrollbar.getNativeScrollbarWidth(). 이 방법은 이미 스크롤 패널의 창 크기에 따라 각 패널의 픽셀 크기를 계산했기 때문에 나에게 잘 맞았습니다.

Answer 2

나는 실제로 거기에 좋은 해결책이 있다고 생각하지 않는다. 정상적인 지점 (공백)에서만 깨기를 허용하거나 단어 안에서 깨질 수 있지만 CSS로 짧은 단어가 깨지는 것을 막을 수는 없습니다.

내가 제안 할 수있는 최선의 제안은 링크가 문제를 야기하기 때문에 어떻게 든 링크를 짧게하는 것입니다. 링크를 클릭 할 수 있다면 큰 문제는 아닙니다.

또는 라벨이나 셀의 고정 크기를 %로 설정할 수도 있습니다 (실제로는 %로 표시 될 수 있음). 깨지지 않는 단어가있는 경우 파기되는 텍스트 비트를 숨기려면 overflow-x을 사용하십시오.