css - 截断步骤栏中的文本

Question

有没有人知道如何截断步骤栏中的文本？

请看下面codepen中的例子:

`https://codepen.io/mmameko/pen/xpZPoW?editors=1100`

Answer 1

将 overflow:hidden 添加到您的 steps 类中。

@function pow($number, $exp) {
  $value: 1;
  @if $exp > 0 {
    @for $i from 1 through $exp {
      $value: $value * $number;
    }
  }
  @else if $exp < 0 {
    @for $i from 1 through -$exp {
      $value: $value / $number;
    }
  }
  @return $value;
}

@function fact($number) {
  $value: 1;
  @if $number > 0 {
    @for $i from 1 through $number {
      $value: $value * $i;
    }
  }
  @return $value;
}

@function pi() {
  @return 3.14159265359;
}

@function rad($angle) {
  $unit: unit($angle);
  $unitless: $angle / ($angle * 0 + 1);
  // If the angle has 'deg' as unit, convert to radians.
  @if $unit == deg {
    $unitless: $unitless / 180 * pi();
  }
  @return $unitless;
}

@function cos($angle) {
  $cos: 0;
  $angle: rad($angle);
  // Iterate a bunch of times.
  @for $i from 0 through 10 {
    $cos: $cos + pow(-1, $i) * pow($angle, 2 * $i) / fact(2 * $i);
  }
  @return $cos;
}

.steps {
  display: inline-flex;
  width: 500px;
  height: 50px;
  border: 1px solid #D9D9D9;
  border-radius: 2px;
  overflow-x:hidden;
}

.step {
  position: relative;
  display: flex;
  align-items: center;
  white-space: nowrap;
  padding: 0 15px;
  box-sizing: border-box;
  background-color: #FAFAFA;
  
  &:hover {
    background-color: #EDEDED;
    cursor: pointer;
  }
  
  &::after {
    position: absolute;
    top: -2px;
    right: -23px;
    content: '';
    width: 27px;
    height: 27px;
    background-color: inherit;
    transform: rotate(67.5deg) skewX(45deg) scaleY(cos(45deg));
    transform-origin: left;
    border-top: 1px solid #D9D9D9;
    border-right: 1px solid #D9D9D9;
    z-index: 1;
  }
}

<div class="steps">
  <div class="step">Very very very long text</div>
  <div class="step">Very very very long text</div>
  <div class="step">Very very very long text</div>
  <div class="step">Very very very long text</div>
  <div class="step">Very very very long text</div>
</div>