85862: Handling very long strings for metadata/files on item page, edit metadata/bitstreams page

src/app/item-page/edit-item-page/item-bitstreams/item-edit-bitstream/item-edit-bitstream.component.html

@@ -1,8 +1,10 @@
 <ng-template #bitstreamView>
   <div class="{{columnSizes.columns[0].buildClasses()}} row-element d-flex">
     <ng-content select="[slot=drag-handle]"></ng-content>
-    <div class="float-left d-flex align-items-center">
+    <div class="float-left d-flex align-items-center overflow-hidden">
-      {{ bitstreamName }}
+      <span class="text-truncate">
+        {{ bitstreamName }}
+      </span>
     </div>
   </div>
   <div class="{{columnSizes.columns[1].buildClasses()}} row-element d-flex align-items-center">

src/app/item-page/edit-item-page/item-metadata/edit-in-place-field/edit-in-place-field.component.html

@@ -26,7 +26,7 @@
 <td class="w-100">
     <div class="value-field">
         <div *ngIf="!(editable | async)">
-            <span>{{metadata?.value}}</span>
+            <span class="dont-break-out">{{metadata?.value}}</span>
         </div>
         <div *ngIf="(editable | async)" class="field-container">
             <textarea class="form-control" type="textarea" attr.aria-labelledby="fieldValue" [(ngModel)]="metadata.value" [dsDebounce]

src/app/item-page/field-components/metadata-uri-values/metadata-uri-values.component.html

@@ -1,5 +1,5 @@
 <ds-metadata-field-wrapper [label]="label | translate">
-    <a *ngFor="let mdValue of mdValues; let last=last;" [href]="mdValue.value">
+    <a class="dont-break-out" *ngFor="let mdValue of mdValues; let last=last;" [href]="mdValue.value">
        {{ linktext || mdValue.value }}<span *ngIf="!last" [innerHTML]="separator"></span>
     </a>
 </ds-metadata-field-wrapper>

src/app/item-page/field-components/metadata-values/metadata-values.component.html

@@ -1,5 +1,5 @@
 <ds-metadata-field-wrapper [label]="label | translate">
-    <span *ngFor="let mdValue of mdValues; let last=last;">
+    <span class="dont-break-out" *ngFor="let mdValue of mdValues; let last=last;">
         {{mdValue.value}}<span *ngIf="!last" [innerHTML]="separator"></span>
     </span>
 </ds-metadata-field-wrapper>

src/app/shared/file-download-link/file-download-link.component.html

@@ -1,4 +1,4 @@
-<a [routerLink]="(bitstreamPath$| async)?.routerLink" [queryParams]="(bitstreamPath$| async)?.queryParams" [target]="isBlank ? '_blank': '_self'" [ngClass]="cssClasses">
+<a [routerLink]="(bitstreamPath$| async)?.routerLink" class="dont-break-out" [queryParams]="(bitstreamPath$| async)?.queryParams" [target]="isBlank ? '_blank': '_self'" [ngClass]="cssClasses">
   <span *ngIf="!(canDownload$ |async)"><i class="fas fa-lock"></i></span>
   <ng-container *ngTemplateOutlet="content"></ng-container>
 </a>

src/styles/_global-styles.scss

@@ -74,3 +74,21 @@ ngb-modal-backdrop {
   }
 }
 
+.dont-break-out {
+  /* These are technically the same, but use both */
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+
+  -ms-word-break: break-all;
+  /* This is the dangerous one in WebKit, as it breaks things wherever */
+  word-break: break-all;
+  /* Instead use this non-standard one: */
+  word-break: break-word;
+
+  /* Adds a hyphen where the word breaks, if supported (No Blink) */
+  -ms-hyphens: auto;
+  -moz-hyphens: auto;
+  -webkit-hyphens: auto;
+  hyphens: auto;
+
+}