From 2529b9542d822eac634ce1cb85a5b53115a1ae81 Mon Sep 17 00:00:00 2001
From: Jessie Keck <jessie.keck@gmail.com>
Date: Mon, 1 Apr 2019 15:59:26 -0700
Subject: [PATCH] Use line-clamp and (not fully supported) -webkit-box display
 for a pure-css multi-line caption truncation.

---
 __tests__/src/components/GalleryView.test.js |  4 ++--
 src/components/GalleryView.js                |  2 +-
 src/containers/GalleryView.js                | 10 ++++++++++
 3 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/__tests__/src/components/GalleryView.test.js b/__tests__/src/components/GalleryView.test.js
index 942bb8f81..c5ff76246 100644
--- a/__tests__/src/components/GalleryView.test.js
+++ b/__tests__/src/components/GalleryView.test.js
@@ -9,7 +9,7 @@ function createWrapper(props) {
   return shallow(
     <GalleryView
       canvases={manifesto.create(manifestJson).getSequences()[0].getCanvases()}
-      classes={{ currentCanvas: 'currentCanvas' }}
+      classes={{ galleryViewItemCurrent: 'galleryViewItemCurrent' }}
       window={{
         canvasIndex: 0,
         id: '1234',
@@ -34,7 +34,7 @@ describe('GalleryView', () => {
     expect(wrapper.find('div[role="button"]').length).toBe(3);
   });
   it('sets a mirador-current-canvas class on current canvas', () => {
-    expect(wrapper.find('div[role="button"]').at(0).props().className).toEqual('currentCanvas');
+    expect(wrapper.find('div[role="button"]').at(0).props().className).toEqual('galleryViewItemCurrent');
   });
   it('renders the canvas labels for each canvas in canvas items', () => {
     expect(wrapper.find('WithStyles(Typography)').length).toBe(3);
diff --git a/src/components/GalleryView.js b/src/components/GalleryView.js
index 5288795cd..f3be77760 100644
--- a/src/components/GalleryView.js
+++ b/src/components/GalleryView.js
@@ -47,7 +47,7 @@ export class GalleryView extends Component {
                     aspectRatio={manifestoCanvas.aspectRatio}
                     style={{ margin: '0 auto' }}
                   />
-                  <Typography variant="caption">
+                  <Typography variant="caption" className={classes.galleryViewCaption}>
                     {manifestoCanvas.getLabel()}
                   </Typography>
                 </div>
diff --git a/src/containers/GalleryView.js b/src/containers/GalleryView.js
index 8e0aacd11..eef04ee8e 100644
--- a/src/containers/GalleryView.js
+++ b/src/containers/GalleryView.js
@@ -30,6 +30,16 @@ const styles = theme => ({
     padding: '50px 0 50px 20px',
     width: '100%',
   },
+  galleryViewCaption: {
+    boxOrient: 'vertical',
+    display: '-webkit-box',
+    height: '3em',
+    lineClamp: '2',
+    lineHeight: '1.5em',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    wordBreak: 'break-word',
+  },
   galleryViewItem: {
     '&:focus': {
       outline: 'none',
-- 
GitLab