Solved

Wrapping email addresses (etc) with css

Posted on 2013-12-05
2
192 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

734 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