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) => [
<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}
</h2>
</li>,

View File

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

View File

@ -58,16 +58,3 @@
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;
}