+
Skip to content

Conversation

Alantitus
Copy link

Addresses #8355

Problem
SelectValue with long label exceed width of dialog

Affected component/components
AlertDialog, Select

Fix Added
I added the truncate class to the SelectValue styling in all three select component implementations:
The fix ensures that when a SelectValue contains long text:

  • The text is properly truncated with an ellipsis (...) when it exceeds the container width
  • The line-clamp-1 limits it to one line
  • The truncate class applies text-overflow: ellipsis and overflow: hidden
  • This prevents the select from expanding beyond its container boundaries

AlertDialogTitle: Added break-words class to handle long titles that could exceed dialog width
AlertDialogDescription: Added break-words class to handle long descriptions that could exceed dialog width

Alan Titus added 2 commits October 9, 2025 10:42
…yout. Updated styles to prevent text overflow in titles and descriptions across multiple instances.
Copy link

vercel bot commented Oct 9, 2025

Someone is attempting to deploy a commit to the shadcn-pro Team on Vercel.

A member of the Team first needs to authorize it.

@Alantitus
Copy link
Author

@shadcn Please review the PR and share any feedback or suggested changes.

@shadcn
Copy link
Collaborator

shadcn commented Oct 9, 2025

@Alantitus I'll review. IIRC there was a specific reason I did not add the truncate in SelectValue. Can't remember why but I'll take a look.

@shadcn shadcn self-assigned this Oct 9, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants
点击 这是indexloc提供的php浏览器服务,不要输入任何密码和下载