Jump to content
iwato

How to Break an URL to Work in Repsonsive Design

Recommended Posts

BACKGROUND:  In an effort to obtain good responsive design I feel compelled to leave out certain elements that are unresponsive.  I am loathe to do this.  I have identified the element that is causing the distortion.  The element retrieves and displays the referring URL.  Unfortunately, in its effort to render the URL fully, the element causes the div to extend beyond the boundaries of the viewport and distorts the page.  Now, I have tried to overcome this problem in the following manner, but it fails.

#yp_container #current_referral_url {
	max-width: 100%;
	overflow-wrap: break-word;
}	

Is there a better way to break up the URL so that it fits?

Roddy

Share this post


Link to post
Share on other sites

Unfortunately, neither

#yp_container #current_referral_url {
	overflow-wrap: break-word;
	word-wrap: break-word;
}	

nor

#yp_container #current_referral_url {
	width: 100%;
	overflow-wrap: break-word;
	word-wrap: break-word;
}	

nor

#yp_container #current_referral_url {
  display: inline-block;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

 

work in the iPhone viewport.  The URL holds steadfast and unbroken, and the section's width extends beyond the left margin.  In contrast, in a normal computer browser environment, the URL breaks just as it should, and the containing div fills the viewport with all of its margins, borders, and padding in tact.

Any further ideas would be appreciated.

Roddy

Share this post


Link to post
Share on other sites

Did you check iphone support at bottom? Did you try using the whole code they supplied which covered all the different options to break the word, instead of breaking it up individually? Its done that way to cover all versions of iphone.

  • Thanks 1

Share this post


Link to post
Share on other sites

The following works, but not universally as stated.  Actually both are required.

#yp_container #current_referral_url {
	display: inline-block;
	overflow-wrap: break-word;
	word-wrap: break-word;
	word-break: break-all;
}	

.ellipses {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

Roddy

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×