rellenar un elemento <p> con guiones (-)

[furoya]

viene de arriba.

Código:

<ol>
<li> La reina <b>Victoria</b> no era virgen. </li>
<li> El nombre de la soberana es mufa.</li>
</ol>

<p class="elParrafo">
<span class="elTexto">Cuando traen la nueva campana de reemplazo, los operarios deciden bautizarla "de apuro", y a falta de un nombre mejor, eligen el apodo de su jefe de obra (Sir <b>Benjamin Hall</b>) que era para todos el "<b>Gran Ben</b>".</span>
<div class="losGuiones">------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------</div>
</p>
<p class="elParrafo">
<span class="elTexto">
<b>Big Ben</b> es, en realidad, el nombre de la campana mayor de <b>St. Stephen</b>.
La gente de la época que conocía la anécdota, solía decir cada hora <i>"—Sonó el Big Ben"</i>; y quienes no la conocían, creyeron que se hablaba del reloj.</span>
<div class="losGuiones">------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------</div>
</p>
<p class="elParrafo">
<span class="elTexto">
Y nadie se ocupó mucho de aclarar el desacierto durante estos últimos 150 años.</span>
<div class="losGuiones">------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------</div>
</p>
<p class="elParrafo laAneda">
<span class="elTexto">Alguien que sí le dio su apodo a un tipo de relojes fue una hetaira famosa en la antigua <b>Grecia</b> llamada <b>Metiké</b>.</span>
<div class="losGuiones">------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------</div>
</p>
<p class="elParrafo">
<span class="elTexto">
Para evitar que sus clientes se demoraran mucho en los preliminares, les ponía un 'reloj' que era una palangana de cobre llena de agua, colgada con cadenas. Adentro arrojaba una bola hueca de hierro que tenía unas pequeñas perforaciones. El agua entraba lentamente por los agujeros y cuando la esfera se llenaba, terminaba cayendo hasta el fondo, golpeando la base como si fuera un gong.</span>
<div class="losGuiones">------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------</div>
</p>
<p class="elParrafo">
<span class="elTexto">
Si el cliente aún no había terminado, tenía que pagar otro turno.</span>
<div class="losGuiones">------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------</div>
</p>
<p class="elParrafo">
<span class="elTexto">
Esto empezó a pasar bastante seguido, lo que preocupó a los hombres del lugar, que temían una impotencia generalizada por obra de algún dios resentido. Pero no era sí. Rapidamente descubrieron que <b>Metiké</b> truchaba el cronómetro agrandando los orificios de la esfera para que cayese antes.</span>
<div class="losGuiones">------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------</div>
</p>
<p class="elParrafo">
<span class="elTexto">
Entonces comenzaron a llamarla "klepsydra" (literalmente <i>"ladrona de agua"</i>), al igual que a sus relojes.</span>
<div class="losGuiones">------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------</div>
</p>
<p class="elParrafo">
<span class="elTexto">
Hoy se llama clepsidra también a los relojes de arena y a todos los que trasvasen un fluido de un contenedor a otro.</span>
<div class="losGuiones">------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------</div>
</p>
<p class="elParrafo laAneda">
<span class="elTexto">Iba terminar contando la historia del primer reloj del Cabildo de <b>Buenos Aires</b>. Ése que al fin lograron traer de <b>Europa</b> juntando moneda por moneda (o cuero sobre cuero), y que el importador insistía con desembalar él personalmente. Cuando llegó al puerto, se le adelantaron y lo abrieron antes, sólo para descubrir que en su máquina habían escondido cualquier cantidad de artículos de contrabando (¡hasta pornografía!).</span>
<div class="losGuiones">------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------</div>
</p>
<p class="elParrafo">
<span class="elTexto">
Pero mejor no lo cuento. Es un bajón.</span>
<div class="losGuiones">------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------</div>
</p>
<p class="elParrafo">
<span class="elTexto">
En esta ciudad fuimos, somos, y seremos siempre una manga de delincuentes.</span>
<div class="losGuiones">------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------</div>
</p>

</body>
</html>

Fijate que para distinguir párrafos entre anécdotas y párrafos dentro de cada historia usé formatos de CSS (modificando márgenes).

[nota: tuve que dividir el código porque no entraba en un solo post, pero no quise resumirlo más.]