使步骤栏中的文本截短

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>