[ARCHIVED] Code to allow long strings of characters (e.g. urls) to break automatically so they don't overflow their containers?

[rebecca_goldswo]

Hi folks,

I've been creating some column layout templates for my colleagues that include image and video examples, and their citation details. The layouts have been created using Flex boxes. On the whole, the layouts have worked well, however, I noticed that the urls I've included as part of the citation information under the video/image do not wrap if they're too long for their container; they just go beyond the container. Does anyone know any code that will prevent this? So far, any code I have found that would do the job gets stripped out.

[swinning]

Hi  @rebecca_goldswo ,

Have you tried applying "word-wrap: break-word"? You can put the link inside a tag and apply the code as a style.

Here is a tutorial about this property.

If that doesn't work, you can also try "flex-wrap: wrap" since you mentioned you are using Flex boxes. CSS flex-wrap property 

[rebecca_goldswo]

Thanks, Sean. Unfortunately, no joy - it keeps getting striped out when I save either code. Perhaps I'm writing it in wrong. In the first scenario, are you suggesting something like <p style="word-wrap: break-word">CONTENT_HERE</p> should work? And for the second scenario, should <div style="flex-wrap: wrap">CONTENT_HERE</div> work?

I've just discovered that this might be a browser specific issue - the long text wraps automatically on Firefox but not on Chrome or Safari (not sure about IE).

Thanks for your help so far.

[swinning]

Rebecca, 

I would actually apply it to a span tag (I put this in my previous reply but I wonder if Instructure stripped it out in this thread and I didn't notice it). You can select specific inline elements by using a span tag (think of it as a div tag for inline elements)/ So it would look like this:

<span style="word-wrap: break-word;">Source: [url]</span>

I haven't tried this yet so I am not sure if it will actually work. 

Good luck!

[rebecca_goldswo]

Thanks, Sean - unfortunately, the word-wrap: break-word code get's stripped out of the span as well. 

[Chris_Hofer]

Is showing the URLs on the page a requirement?  I'm thinking of people who use screen readers in this situation.  The screen readers would read the entire URL which may not be as helpful as the name of the website with some helpful "alt" text behind it.  So, instead of having the actual URL listed under your bold "Source" wording, you would type in the name of the website, highlight the name of the website you just typed, and then press Ctrl+K on you keyboard.  This would bring up a small window where you would type in the URL and the "alt" title which should show when someone places their mouse over the link.  I think this might also eliminate the issue you're having with text carrying over into space that you don't want it to...because actual words/phrases are being shown on the screen vs. one long string of characters to display a URL address.  My two cents.

[rebecca_goldswo]

Hi Chris,

Thanks for your suggestion - it's definitely food for thought and something I'll discuss it with my colleagues. The reason I included the url in it's entirety on the page was to get users of the template thinking that they might want to cite things they include on their page (even though what I've included isn't an actual citation style).

For example, someone might want to site an image using the APA citation style:

E.g. Khafre pyramid from Khufu’s quarry 2007, digital photograph, Ancient Egypt Research Associates, accessed 2 August 2007, <http://www.aeraweb.org/khufu_quarry.asp>

While this isn't a requirement at the institution I work (we've just started using Canvas this semester so it's all new!), it might be something we suggest.

I remember seeing an idea on the Canvas Community site a little while ago about adding a feature to allow users to add captions to images and/or video - that would be a nice idea to get going and might as an unanticipated bonus  solve this problem too.

Thanks for your help.