Solved

Wrapping email addresses (etc) with css

Posted on 2013-12-05
2
180 Views
Last Modified: 2013-12-20
Hello experts,

I have a div "table" that contains columns of text and email addresses.

It appears that when I have a long email address it will not wrap and will stick outside the "box".

I have seen discussions on the web on how to use css to get email addresses (and urls) to wrap.

I am looking for the best solution here, for all modern browsers (including IE8 if possible).

Thanks!

Rowby
0
Comment
Question by:Rowby Goren
2 Comments
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 500 total points
ID: 39699499
Normally a string will only wrap at white space, but you can indicate optional wrap points with the <wbr> tag:
https://developer.mozilla.org/en/docs/Web/HTML/Element/wbr
I'm not sure about the reliability of older IE browsers.

The other possibility is the CSS3 hyphens property; but that is not yet a finalized standard and not widely supported:

https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens

Generally for those kinds of things I will set overflow: hidden and put the string in the title attribute to display the whole thing as a tooltip.

Cd&
0
 
LVL 9

Author Closing Comment

by:Rowby Goren
ID: 39732821
Thanks!

Sorry for taking so long to award the points!

Rowby
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…

758 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

24 Experts available now in Live!

Get 1:1 Help Now