#8975 Fix tag display when they run off the page

[sekmiller]

What this PR does / why we need it: The display of file tags (actually categories) runs off the side of the page on the file page when there are numerous long categories associated with a file. This PR updates the css to fix the word break. For reasons that are not entirely clear this also fixes the wrapping of the file description wrapping issue 9325

Which issue(s) this PR closes:

Closes #8975 File level metadata: File level metadata tags should wrap and not run off the page.
Closes #9325 Description metadata field: description field text should wrap and not run off the page

Special notes for your reviewer:

Suggestions on how to test this:

Does this PR introduce a user interface change? If mockups are available, please link/include them here:
No
Is there a release notes update needed for this change?:
no
Additional documentation:

[qqmyers]

On demo, if I add word-break: break-word to the file-tags div, these wrap:
from

to

Does just

#file-tags {
word-break:break-word;
}

in the structure.css file work?

[coveralls]

Coverage: 19.937%. Remained the same when pulling 997acde on 8975-fix-wrapping-of-file-tags into eb5fec8 on develop.

[sekmiller]

I wasn't able to get the css to recognize the style (is there a particular place I have to put it?) but even when I did this:

                                                        <div id="file-tags" style="word-break:break-word; background-color: yellowgreen;"> 

directly in file.xhtml I got this:

[landreev]

For reasons that are not entirely clear this also fixes the wrapping of the file description wrapping issue 9325

I'm assuming the reason is that the page renders these separate divs based on the maximum character width, i.e. the longest one; which must have been this combined tags label - and now that it's solved, all the other ones are rendered normally? - just a guess.

[qqmyers]

It looks like Safari is the one major browser that doesn't handle word-breaks quite the same way. The following css added to structure.css and the addition of a (non-visible) space between the tags themselves appear to work (awaiting testing from @sekmiller ). It looks like this retains the responsive design and flows as the page width is decreased.

#file-tags .label {
    white-space:normal;
}
//Safari-only
@media not all and (min-resolution:.001dpcm) {
    @supports (-webkit-appearance:none) and (display:flow-root) {
        #file-tags .label {
            white-space: break-spaces;
        }
    }
}

dataverse/src/main/webapp/file.xhtml

Line 481 in 8f73098

<h:outputText value="#{tag}" styleClass="label label-default"/>

-> value="#{tag} "

[sekmiller]

the fix suggested by Jim works in Safari and Firefox. I did notice that the tags run off the page in Safari if you make the page too narrow, but we've seen that in other places on Safari and we may have to just live with it.