vuetifyjs/vuetify

[Bug Report][3.6.8] VCardTitle or VCard Titles should not be truncated

Open

#19,966 建立於 2024年6月7日

在 GitHub 查看
 (1 留言) (0 反應) (0 負責人)TypeScript (40,995 star) (7,139 fork)batch import
C: VCardT: buggood first issue

描述

Environment

Vuetify Version: 3.6.8 Vue Version: 3.4.27 Browsers: Chrome 125.0.0.0 OS: Windows 10

Steps to reproduce

Create a long title in a VCard that exceeds the width of the card.

Expected Behavior

Title should wrap

Actual Behavior

Title is getting truncated with elipses.

Reproduction Link

https://play.vuetifyjs.com/#...

Other comments

MD3 shows an example Card with a wrapped title. https://m3.material.io/components/cards/specs#ec74bd0e-a669-4be9-91ee-bfa60fbbe507

I copied https://github.com/vuetifyjs/vuetify/issues/17278 because of the instruction "Please create a new issue instead of commenting on the old one."

I think the generally expected behavior is that the text is not cut off. I thought of a prop that activates the truncate

貢獻者指南

技術棧
vuetypescriptcss
領域
frontend
議題類型
bug
難度面向新貢獻者的預計實作難度，1 表示很小改動，5 表示專家級工作。
2
預計時間有經驗貢獻者完成調查、實作、測試並準備 pull request 的粗略時間範圍。
1-3 hours
活動狀態議題目前的可參與程度：新鮮、活躍、陳舊、阻塞或等待維護者輸入。
fresh
清晰度議題是否清楚說明預期改動、驗收標準和下一步。
clear
前置要求
Basic Vue knowledgeCSS overflow properties
新手友善度1-100 的估計分數，表示該議題對首次貢獻者的友善程度。
85
研究方向
Investigate the VCard component's title styling. The issue is that long titles are truncated with ellipsis instead of wrapping. Look at the VCard component source in the vuetify repository, likely in packages/vuetify/src/components/VCard/. Check the CSS for the title class and ensure overflow wrap or word break is set to allow wrapping. Also review the linked issue #17278 for prior context.