Solved

Wrapping email addresses (etc) with css

Posted on 2013-12-05
2
190 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: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering 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

Suggested Solutions

Title # Comments Views Activity
css selector 1 24
Can anyone see what is the fault in my javascript code? 8 42
Obsolete font tag need to convert to CSS 3 36
Top Aligning Inner Divs 5 23
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…
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

733 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