Flexbox 내에서 빈 테이블 열 사용: nowrap

Question

Flexbox 컨테이너 내부의 공백 이제 랩 텍스트가 페이지를 넘칩니다.

CSS 레이아웃에서 이상한 상황에 직면한 것 같습니다.

테이블이 있고 한 열에 두 개의 열이 있는 플렉스 컨테이너가 있습니다. 첫 번째 열에는 선택 항목이 포함되어 있고, 두 번째 텍스트는 한 줄에 있어야 하며 너무 길면 줄임표로 끝나야 합니다(텍스트는 동적입니다)

분명히 말씀드리자면 저는 테이블 HTML을 제어할 수 없습니다. 열 내에서만 HTML을 추가할 수 있습니다.

Flexbox 내부의 텍스트 오버플로는 일반적인 문제인 것 같지만 내 경우에는 일반적인 솔루션이 모두 작동하지 않았습니다. 내가 시도한 것:

• 최소 너비 추가: 0, 플렉스 컨테이너
;
• 탄력적 축소 추가: 텍스트가 있는 flexbox
• 탄력적 성장 추가: 1 선택을 사용하여 상자 확장
• 작은 물건이 많음(컨테이너 너비 100% 등)

이것은 제가 다양한 stackoverflow 기사에서 찾은 모든 솔루션이지만 저에게는 아무 효과가 없었습니다. Flex 컨테이너가 테이블 외부에 있으면 모든 것이 잘 작동하지만 다시 말하지만 그것은 나에게 옵션이 아닙니다.

이렇게 하면 무슨 뜻인지 명확해집니다.

으아악 으아악

이 솔루션은 최신 브라우저에서만 작동하거나 특정 브라우저가 필요한 경우에도 작동한다는 데 동의합니다.

Answer 1

vw 单元将宽度分配给 .text를 사용하면 이 문제를 해결할 수 있습니다.

예를 들어 width: 50vw; 添加到 .text를

로 바꾸면 이런 일이 발생합니다.

으아아아 으아아아

Answer 2

기본적으로 표 너비는 내용에 따라 조정됩니다. 너비를 제한하려면 table-layout 更新算法：fixed ; 并添加 width: 100%;을 사용해야 합니다.

으아아아 으아아아