I'm designing an area of an app that needs to display users in a certain group. To save space while providing larger (more recognizable photos), I've decided to use a "card" style with photo above name and email. Each user's email address needs to be viewable.
The issue is dealing with email addresses being wider than the widths of the "user card." I've come up with a few possible ways of dealing with this and I'm curious as to what people think is the most user friendly.
Option A: Setting the email containing element to hide overflow and using a mouse tool tip to display the full email.
Option B: The same as A, except using an ellipses to denote the email address is truncated.
Option C: Just force the email to me multi-line
Option D: Replace the truncated email with the word "Email" that uses a mouse tool tip.
Option E: Remove the email and make it appear when hovering over the user's name via a mouse tool tip.
I appreciate your thoughts and suggestions.