Uploaded image for project: 'DSpace'
  1. DSpace
  2. DS-4190

Word-break CSS class breaks words without hyphens in Firefox and Opera mini

    Details

    • Type: Bug
    • Status: Code Review Needed (View Workflow)
    • Priority: Minor
    • Resolution: Unresolved
    • Affects Version/s: 6.3
    • Fix Version/s: 6.4
    • Component/s: XMLUI
    • Labels:
    • Environment:
      DSpace 6.3 with XMLUI Mirage2
    • Attachments:
      2
    • Comments:
      0
    • Documentation Status:
      Needed

      Description

      The word-break class is used to break up words that are too long to render without overflowing. This is used for instance when viewing a full record.

      It was committed in 2014 and reads:

       

      .word-break {
       -ms-word-break: break-all;
       word-break: break-all;
       /* Non standard for webkit */
       word-break: break-word;
      -webkit-hyphens: auto;
      -moz-hyphens: auto;
       hyphens: auto;
      }
      
      

        

      as is discussed in this blog post the above class is a widely used solution but however it doesn't render hyphens in Firefox and Opera mini (and I've been told Safari but I've not confirmed).

      the aforementioned blog post suggests this fix:

       

      .word-break { 
        overflow-wrap: break-word;
        word-wrap: break-word;
        -webkit-hyphens: auto;
        -ms-hyphens: auto;
        -moz-hyphens: auto;
         hyphens: auto;
      }

       

       which I have confirmed works in Chrome, Firefox and Opera.

       The attached screenshots shows rendering in Firefox in current version (without-hyphens-png) and then rendering using the new class (with-hyphens.png).

       

        Attachments

          Activity

            People

            • Assignee:
              hrafn.malmquist Hrafn Malmquist
              Reporter:
              hrafn.malmquist Hrafn Malmquist
            • Votes:
              0 Vote for this issue
              Watchers:
              1 Start watching this issue

              Dates

              • Created:
                Updated: