Css clamp

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
nextcloud · Jun 25, 2018 · ab22ffa · ab22ffa
1 parent 910a431
commit ab22ffa
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 4 deletions.
diff --git a/settings/css/settings.scss b/settings/css/settings.scss
@@ -1479,8 +1479,17 @@ doesnotexist:-o-prefocus, .strengthify-wrapper {
 				}
 				&.name,
 				&.storageLocation {
-					// better multi-line visual
+					/* better multi-line visual */
 					line-height: 1.3em;
+					max-height: 2.6em;
+					overflow : hidden;
+					/* not supported by all browsers 
+					   so we keep the overflow hidden
+					   as a fallback */
+					text-overflow: ellipsis;
+					display: -webkit-box;
+					-webkit-line-clamp: 2;
+					-webkit-box-orient: vertical;
 				}
 				&.quota {
                     .multiselect--active + progress {

diff --git a/settings/js/settings-vue.js b/settings/js/settings-vue.js
diff --git a/settings/js/settings-vue.js.map b/settings/js/settings-vue.js.map
diff --git a/settings/src/components/userList/userRow.vue b/settings/src/components/userList/userRow.vue
@@ -40,7 +40,7 @@
 				 v-if="!loading.delete && !loading.disable">
 		</div>
 		<!-- dirty hack to ellipsis on two lines -->
-		<div class="name">{{user.id.substr(0, 40)}}{{user.id.substr(0, 40).length===40?'…':''}}</div>
+		<div class="name">{{user.id}}</div>
 		<form class="displayName" :class="{'icon-loading-small': loading.displayName}" v-on:submit.prevent="updateDisplayName">
 			<input :id="'displayName'+user.id+rand" type="text"
 					:disabled="loading.displayName||loading.all"