Use bootstrap mixing text-truncate instead of custom styles

This commit is contained in:
Paul Clarke 2016-04-21 10:13:02 +12:00 committed by Ingo Schommer
parent 02bb158a27
commit 9b5430a80c
3 changed files with 2 additions and 14 deletions

View File

@ -24,7 +24,7 @@ class BreadcrumbComponent extends SilverStripeComponent {
]), ]),
this.props.crumbs.slice(-1).map((crumb, index) => [ this.props.crumbs.slice(-1).map((crumb, index) => [
<li className="breadcrumb__item breadcrumb__item--last"> <li className="breadcrumb__item breadcrumb__item--last">
<h2 className="breadcrumb__item-title breadcrumb__item-title--last text-truncate" key={index}> <h2 className="breadcrumb__item-title breadcrumb__item-title--last" key={index}>
{crumb.text} {crumb.text}
</h2> </h2>
</li>, </li>,

View File

@ -25,4 +25,5 @@
font-size: $font-size-lg; font-size: $font-size-lg;
font-weight: normal; font-weight: normal;
line-height: 24px; line-height: 24px;
@include text-truncate;
} }

View File

@ -58,16 +58,3 @@
font-family: 'Bitstream Vera Sans Mono','Courier', monospace; font-family: 'Bitstream Vera Sans Mono','Courier', monospace;
} }
} }
// Used for long sentences where you would like to truncate them with an ellipsis (requires a set width)
.truncate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
// Used for breaking text so it doesn't run horizontally, useful for breaking URLs
.break-string {
overflow-wrap: break-word;
word-wrap: break-word;
}