@mixin ellipsis($row) { overflow: hidden; text-overflow: ellipsis; @if $row == 1 { display: block; white-space: nowrap; word-wrap: normal; } @else if $row >= 2 { display: -webkit-box; -webkit-line-clamp: $row; -webkit-box-orient: vertical; word-wrap: break-word; } } .ucap-file-upload-queue-container { width: 100%; height: 100%; .file-upload-item { background-color: #eeeeee; min-width: 200px; margin: 0 0.5%; margin-bottom: 10px; width: 32%; border-radius: 3px; .file-upload-info { padding: 10px; background-color:#ffffff; border-bottom: 1px solid #dddddd; svg { margin-right: 6px; } .file-upload-name { height: 40px; @include ellipsis(2); } } .file-upload-progress { padding: 6px 10px; } &:nth-child(3n + 1) { margin-left: 1%; } &:nth-child(3n + 0) { margin-right: 1%; } } }