CSS通过FontAwesome获得星级 [英] CSS for star ratings via FontAwesome
问题描述
我通过不同的方法尝试了几种CSS星级评分,并尝试通过FontAwesome而不是使用Sprite实现以下内容.我希望能够理想地包含半颗星,但这是以下示例失败的地方.到目前为止,这是我尝试过的.我无法让半颗或半颗星在这里正常工作.任何指针都非常感谢!
I've tried a few variations of CSS star ratings via different methods, and am trying to implement the following via FontAwesome rather than using a sprite. I want to be able to include half stars ideally, but this is where the example below is failing. This is what I've tried so far. I can't get the half / partial star to work correctly here. Any pointers greatly appreciated!
.score {
display: block;
font-size: 16px;
position: relative;
overflow: hidden;
}
.score-wrap {
display: inline-block;
position: relative;
overflow: hidden;
height: 19px;
}
.score .stars-active {
color: #EEBD01;
position: relative;
z-index: 10;
display: inline-block;
}
.score .stars-inactive {
color: grey;
position: absolute;
top: 0;
left: 0;
-webkit-text-stroke: initial;
overflow: hidden;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
<span class="score">
<div class="score-wrap">
<span class="stars-active" style="width:88%">
<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>
</span>
<span class="stars-inactive">
<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>
</span>
</div>
</span>
<span class="score">
<div class="score-wrap">
<span class="stars-active" style="width:50%">
<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>
</span>
<span class="stars-inactive">
<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>
</span>
</div>
</span>
<span class="score">
<div class="score-wrap">
<span class="stars-active" style="width:100%">
<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>
</span>
<span class="stars-inactive">
<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>
</span>
</div>
</span>
<span class="score">
<div class="score-wrap">
<span class="stars-active" style="width:0%">
<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>
</span>
<span class="stars-inactive">
<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>
</span>
</div>
</span>
推荐答案
overflow:hidden需要位于'stars-active'(大小元素)上,而不是'score-wrap'(永不溢出).使用white-space: nowrap
防止星星环绕到隐藏溢出容器中的下一行.
The overflow:hidden needs to be on 'stars-active' (the sized element) instead of 'score-wrap' (which never overflows.) You can use white-space: nowrap
to prevent the stars from wrapping to the next line within the hidden-overflow container.
.score {
display: block;
font-size: 16px;
position: relative;
overflow: hidden;
}
.score-wrap {
display: inline-block;
position: relative;
height: 19px;
}
.score .stars-active {
color: #EEBD01;
position: relative;
z-index: 10;
display: inline-block;
overflow: hidden;
white-space: nowrap;
}
.score .stars-inactive {
color: grey;
position: absolute;
top: 0;
left: 0;
-webkit-text-stroke: initial;
/* overflow: hidden; */
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
<span class="score">
<div class="score-wrap">
<span class="stars-active" style="width:88%">
<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>
</span>
<span class="stars-inactive">
<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>
</span>
</div>
</span>
<span class="score">
<div class="score-wrap">
<span class="stars-active" style="width:50%">
<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>
</span>
<span class="stars-inactive">
<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>
</span>
</div>
</span>
<span class="score">
<div class="score-wrap">
<span class="stars-active" style="width:100%">
<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>
</span>
<span class="stars-inactive">
<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>
</span>
</div>
</span>
<span class="score">
<div class="score-wrap">
<span class="stars-active" style="width:0%">
<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>
</span>
<span class="stars-inactive">
<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>
</span>
</div>
</span>
这篇关于CSS通过FontAwesome获得星级的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!