[Bug Report][3.6.8] VCardTitle or VCard Titles should not be truncated
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 41k
- Forks
- 7.1k
- Avg merge
- 1d 21h
- Merged PRs (30d)
- 11
Description
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
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the linked Vuetify Playground reproduction and inspect the VCardTitle component behavior for a title wider than its card. Compare it with the wrapped title shown in the linked Material Design card specification. Done means long VCard titles wrap instead of being truncated with ellipses, without changing the intended card layout.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- design, frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 56/100