Welcome to WebmasterWorld Guest from 54.198.52.8

Forum Moderators: not2easy

Message Too Old, No Replies

Prevent Text From Extending Past Containing Div?

     
5:35 pm on Jan 24, 2017 (gmt 0)

Senior Member

WebmasterWorld Senior Member planet13 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:June 16, 2010
posts: 3823
votes: 29


I have a long email address as text that extends past the containing Div when viewing on a smartphone.

Any ideas on what might be causing that?

The text doesn't EXPAND the parent Divs, It just runs outside of the parent Divs.

Meaning, I want that text to wrap to a new line instead of just continuing outside the viewable area.

The text is in an h3 tag and is a LINKED email address.

Thanks in advance.
6:03 pm on Jan 24, 2017 (gmt 0)

Administrator from US 

WebmasterWorld Administrator not2easy is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Dec 27, 2006
posts:3451
votes: 181


<h3 tags have display: block as a default. Since they are not enclosing any header text, they should not be used there to style links. Instead, style the behavior of the enclosing div and the appearance of the link text and it will naturally wrap (unless the container parent prevents it. I can't say definitely what would result because you have not shared that part of your css and/or html here.

If you feel you must use <h3 tags for the link, you can try adding overflow: inherit; IF the container is set to display: block; The default for overflow is 'visible' and so if no other variable is specified the alternate settings won't wrap gracefully. Without <h3 tags you should see it wrap. (Again, assuming it is not inheriting any overflow setting.)

Have you ever submitted the URL to w3.org's jigsaw for a report and suggestions? There's a link in the Charter: [webmasterworld.com...]
11:11 pm on Jan 24, 2017 (gmt 0)

Senior Member from GB 

WebmasterWorld Senior Member 10+ Year Member

joined:Oct 2, 2003
posts: 988
votes: 31


Hi there Planet13 ,

have you not considered just using this...


<style media="screen">
h3 {
word-break: break-all;
}
</style>



birdbrain