Contents

// Truncate
//
// css-truncate will shorten text with an ellipsis.

.css-truncate {

  // css-truncate-auto will shorten text with an ellipsis when overflowing
  &.css-truncate-overflow,
  .css-truncate-overflow,
  &.css-truncate-target,
  .css-truncate-target {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  // css-truncate-target will shorten text with an ellipsis and a max width
  &.css-truncate-target,
  .css-truncate-target {
    display: inline-block;
    max-width: 125px;
    vertical-align: top;
  }

  &.expandable.zeroclipboard-is-hover .css-truncate-target,
  &.expandable.zeroclipboard-is-hover.css-truncate-target,
  &.expandable:hover .css-truncate-target,
  &.expandable:hover.css-truncate-target {
    max-width: 10000px !important;
  }
}

.Truncate {
  display: inline-flex;
  min-width: 0;
  max-width: 100%;

  > .Truncate-text {
    min-width: 1ch;
    max-width: fit-content;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    + .Truncate-text {
      margin-left: $spacer-1;
    }

    &.Truncate-text--primary {
      flex-basis: 200%;
    }

    &.Truncate-text--expandable:hover,
    &.Truncate-text--expandable:focus,
    &.Truncate-text--expandable:active {
      max-width: 100% !important;
      flex-shrink: 0;
      cursor: pointer;
    }
  }
}

Version data entries

1 entries across 1 versions & 1 rubygems

Version	Path
primery-0.1.0	_sass/@primer/css/truncate/truncate.scss