Este team de expertos pasados ciertos días de investigación y de recopilar de información, hemos dado con los datos necesarios, nuestro deseo es que resulte de gran utilidad en tu plan.
Solución:
El desbordamiento: hidden debe estar en ‘stars-active’ (el elemento de tamaño) en lugar de ‘score-wrap’ (que nunca se desborda). white-space: nowrap para evitar que las estrellas pasen a la siguiente línea dentro del contenedor de desbordamiento oculto.
.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; */
Encontré esta solución de Paales aquí: https://github.com/FortAwesome/Font-Awesome/issues/717
Creo que es una solución elegante. Parece comparable a su código porque las estrellas completas se superponen a las estrellas vacías y al usar overflow: hidden y position: absolute. Ahora puede establecer el ancho de las estrellas completas y mostrar las estrellas parcialmente llenas. Si desea mostrar medias estrellas, puede cambiar el ancho del elemento posicionado absoluto con incrementos del 10%.
.rating-box
position:relative;
vertical-align: middle;
font-size: 3em;
font-family: FontAwesome;
display:inline-block;
color: #F68127;
.rating-box:before
content: "f006 f006 f006 f006 f006";
.rating-box .rating
position: absolute;
left:0;
top:0;
white-space:nowrap;
overflow:hidden;
color: #F68127;
.rating-box .rating:before
content: "f005 f005 f005 f005 f005";
PD: Daniel Beck ya te dio la respuesta sobre el error que cometiste con respecto a white-space: no-wrap, por lo que sugiero aceptar esa respuesta. Solo quería compartir esta solución porque creo que es un enfoque alternativo muy agradable.
A continuación se muestra la versión Font Awesome 5 de la respuesta de @ Rob anterior:
Nosotros podemos usar font-family: "Font Awesome 5 Free"; font-weight: xxx; para cambiar entre sólido y contorno
Puedes jugar con el código en el siguiente enlace.
/* rating box with fontawesome 5 inspired from - https://stackoverflow.com/a/49343426/6908282*/
.rating-box
position: relative;
vertical-align: middle;
font-size: 3em; /* comment/edit this to change size */
font-family: FontAwesome;
display: inline-block;
color: #F68127;
.rating-box:before
font-family: "Font Awesome 5 Free";
font-weight: 400;
content: "f005 f005 f005 f005 f005";
.rating-box .rating
position: absolute;
left: 0;
top: 0;
white-space: nowrap;
overflow: hidden;
color: #F68127;
.rating-box .rating:before
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "f005 f005 f005 f005 f005";