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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...