Dealing with Long URLs/long words/wrapping.

[carlbsmith]

I am creating a mobile page with a grid that has a detail view. I have some instances in the detail view where I either have a long URL or a long email address shown. This goes outside of my defined container, and causes the webpage to be larger than the display size of the screen. I have been looking at styling options like the following:

word-break: break-word;

I even found an example on the W3schools website that uses this word-break styling, and it seems like exactly what I am trying to do:

http://www.w3schools.com/cssref/css3_pr_word-wrap.asp

However, I can't get this to work. I have tried putting this styling into the in-line cell, directly in the details view portion of my component, I have also tried modifying my style sheet directly. Either scenario gives the same result, it doesn't work, and my long URLs continue to spill over rather than wrap, and causes my page layout to mess up.

Anybody have any suggestions on making this work in Alpha Five. Anyone with experience on this?

[DaveF]

Can you post a screenshot of the problem?

Edit: I think I understand what you are describing now. You want to force long strings to wrap staying within the defined width of the control.

[carlbsmith]

Photo Apr 16, 2 37 30 PM.pngPhoto Apr 16, 2 38 02 PM.png

Here are two images. One of them shows what happens on my iphone screen if there is a really long URL. The containers get too big for for the screen, and now I have to scroll left/right to see everything. Picture number two is an example of what it should look like and does look like when there is no long URL, etc. Everything stays nice and neat on the page like it is supposed to.

[rnoguera]

Word wrapping probably does not work correctly when you have a single, long word, without spaces in it.
Standard word wrapping takes place at the space between words.
In a similar case, I split the long text in several lines in the select statment, and then i display each line in its own control.

[carlbsmith]

Thanks for the feedback. So this is what I was trying to accomplish to deal with really long words:

http://www.w3schools.com/cssref/css3_pr_word-wrap.asp

Seems like this is what people have done to get around this issue, except it doesn't seem to work in my case.