Skip to content

Commit

Permalink
fix(ellipsis): removed 2 and 3 line ellipsis options
Browse files Browse the repository at this point in the history
ellisis do not have line describers anymore ie. type-ellipsis-1-line.
only type-ellipsis.

[finishes 93494332]
  • Loading branch information
Kenny Wang and Tyler Phelan committed Jul 10, 2015
1 parent d7af198 commit fbd5fc3
Showing 1 changed file with 4 additions and 39 deletions.
43 changes: 4 additions & 39 deletions src/pivotal-ui/components/ellipsis/ellipsis.scss
Original file line number Diff line number Diff line change
Expand Up @@ -18,51 +18,16 @@ npm install pui-css-ellipsis --save
</code>
The type `.type-ellipsis-1-line` adds ellipsis to text when there is too much. Combine it with `.col-md-*` classes to get the width you want.
<div class="alert alert-danger mbxl">
<h5 class="em-high mtn">
Deprecation warning
</h5>
<p>
The 2- and 3-line ellipsis are deprecated.
</p>
</div>
The type `.type-ellipsis` adds ellipsis to text when there is too much. Combine it with `.col-md-*` classes to get the width you want.
```html_example_table
<p class="type-ellipsis-1-line">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p class="type-ellipsis-2-lines">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p class="type-ellipsis-3-lines">
<p class="type-ellipsis">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
```
<div class="alert alert-info">
<p class="em-high">
Multi-line ellipsis only works on webkit.
</p>
</div>
*/

.type-ellipsis-1-line {
.type-ellipsis {
@include text-overflow;
}

.type-ellipsis-2-lines,
.type-ellipsis-3-lines {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.type-ellipsis-3-lines {
-webkit-line-clamp: 3;
}
}

0 comments on commit fbd5fc3

Please sign in to comment.