Solved

Wrapping email addresses (etc) with css

Posted on 2013-12-05
2
183 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

Optimizing Cloud Backup for Low Bandwidth

With cloud storage prices going down a growing number of SMBs start to use it for backup storage. Unfortunately, business data volume rarely fits the average Internet speed. This article provides an overview of main Internet speed challenges and reveals backup best practices.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
iOS 10 iPad Zoom and acroll 4 73
.php tree directory? 5 72
Problem with a CSS in a page 2 30
Can't get container centered 4 13
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
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…

772 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