溢出：隐藏在Flex显示器上不起作用

debugcn 发表于 Dev

艾丹·奈特

我一直在尝试将类似星级评分脚本的内容集成到我的Laravel应用中，并复制/粘贴相关代码。除类中的overflow: hidden属性front-stars未按预期工作外，它工作正常。它们不会被隐藏，而是显示在其余的下方。

在CodePen上测试时，此方法工作正常，但似乎在我自己的页面上还有其他干扰。是什么导致这种情况发生？

<style>
%flex-display {
    display: flex;
}
.back-stars {
    @extend %flex-display;
    color: #000;
    position: relative;
    text-shadow: 1px 1px 3px #000;
}
.star-rating {
    @extend %flex-display;
    align-items: center;
    font-size: 15px;
    justify-content: center;
}
.front-stars {
    @extend %flex-display;
    color: #FFBC0B;
    overflow: hidden;
    position: absolute;
    text-shadow: 2px 2px 5px #d29b09;
    top: 0;
    transition: all .5s
}
</style>

@section('content')
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">Info</div>
                    <div class="card-body">

                    <table id="dtInfo" class="table table-striped table-bordered table-hover" cellspacing="0" width="100%">
                            <thead>
                                <tr>
                                    <th scope="col">Title</th>
                                    <th scope="col">Software</th>
                                    <th scope="col">Machine</th>
                                    <th scope="col">Rating</th>
                                    <th scope="col">Author</th>
                                </tr>
                            </thead>
                            <tbody>
                            @foreach ($profiles as $profile)
                                <tr>
                                    <td><a href="{{ route('profile.show', $profile->id) }}">{{ $profile->title }}</td>
                                    <td>{{ $profile->slicer }}</td>
                                    <td>{{ $profile->machine }}</td>
                                    <td>
                                        <div class="star-rating" title="{{$profile->averageRating()}}">
                                            <div class="back-stars">
                                                <i class="fa fa-star-o" aria-hidden="true"></i>
                                                <i class="fa fa-star-o" aria-hidden="true"></i>
                                                <i class="fa fa-star-o" aria-hidden="true"></i>
                                                <i class="fa fa-star-o" aria-hidden="true"></i>
                                                <i class="fa fa-star-o" aria-hidden="true"></i>

                                                <div class="front-stars" style="width: {{$profile->ratingPercent()}}%">
                                                    <i class="fa fa-star" aria-hidden="true"></i>
                                                    <i class="fa fa-star" aria-hidden="true"></i>
                                                    <i class="fa fa-star" aria-hidden="true"></i>
                                                    <i class="fa fa-star" aria-hidden="true"></i>
                                                    <i class="fa fa-star" aria-hidden="true"></i>
                                                </div>
                                            </div>
                                        </div>
                                    </td>
                                    <td>Username</td>
                                </tr>
                            @endforeach
                            </tbody>
                        </table>

                    </div>
                </div>
            </div>
        </div>
    </div>

托基尔

由于目标元素.front-stars是绝对定位的，并且没有指定高度，因此溢出实际上并不能正常工作。

您需要提供一个特定的高度，该位置元素应停止并隐藏溢出的元素。这就是溢出的原理

根据您的codepen：

.front-stars {
    @extend %flex-display;
    color: #FFBC0B;
    width: 50%;
    height: 24px;
    overflow: hidden;
    position: absolute;
    top: 0;
    transition: all .5s
}

另外，请尝试减少星星的黑暗，使其看起来更好。

在此处了解有关溢出如何工作的更多信息

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。