Vuetify v-btn 텍스트 동작

Question

다음과 같은 버튼 세트가 있습니다:

으아악

이 예에서는 텍스트가 하드코딩되어 있지만 실제로는 API에서 텍스트를 가져오고 있습니다. 길이는 가변적이어서 미리 알 수 없습니다. 나에게 필요한 것:

1. 버튼 2처럼 텍스트가 버튼 공간을 넘지 않습니다.
2. 버튼 텍스트에 필요한 줄을 사용하도록 하세요. 1,2,10...길이에 따라 다릅니다. 줄 바꿈을 사용하여 항상 수직으로 성장하면 CSS 속성 "word-break: Normal;"이 부여됩니다.
"블록" 속성으로 인해 버튼의 너비는 고정되어 열의 전체 너비를 차지합니다.

이 모든 것은 데스크톱, 태블릿, 모바일 보기에서 구현되어야 합니다.

여기에서 테스트할 수 있습니다.

Answer 1

이것을 시도해 보세요:

으아아아

그리고:

으아아아