How to Break an URL to Work in Repsonsive Design

[iwato]

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

[dsonesuk]

https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/

[iwato]

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

[dsonesuk]

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.

[iwato]

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