¿Cómo subrayar el espacio en blanco en CSS?

Question

Estoy haciendo un informe que debería poder imprimirse desde el navegador web. En la parte inferior hay un campo para que el destinatario complete, por lo que está subrayado. Preferiría no tener que mirar un cierto número de guiones bajos, y parecen tener lagunas en ellos de todos modos.

Lo que voy a se ...

Monto pagado: $ _ __ _ __ __ _ _ __ __ _ _ ___

Hasta ahora, he logrado este CSS:

<div> 
    <p style="border-bottom: 1px solid black;"> 
     Amount Paid: $ 
    </p> 
</div> 

Eso dibuja una línea hasta el borde de la matriz div - que quiero. Sin embargo, también dibuja una línea debajo de "Monto pagado: $", que no quiero. Cada combinación de p s, s, etc. span he pensado ha fallado:

Si pongo el texto en un span que armas nucleares de la frontera, no importa, supongo, ya que sigue siendo parte de la p y el borde todavía está dibujado.

Puedo agregar el subrayado a un lapso después del texto, pero eso no funciona. Solo parece querer subrayar el espacio en blanco cuando el estilo del borde está en el elemento p.

Del mismo modo, si se sustituye la p con un span que no consiguió la nota que debe extenderse la frontera hasta el final:

<p> 
    <span>Amount Paid: $ </span> 
    <span style="border-bottom: 1px solid black;"> </span> 
</p> 

no hace nada. La línea nunca se dibuja. Si agrego una carta al segundo tramo, se dibuja debajo de eso, pero no más. Y si reemplazo el p con cualquier otra cosa como divs o tramos, tampoco parece funcionar ...

¿Alguna idea? Gracias por adelantado.

Answer 1

Cambie el display (CSS) del segundo tramo a inline-block y configure su width (CSS).

UPD:

O intentar algo como:

<p style="width: 200px; display: table;"> 
    <span style="display: table-cell; width: 100px;">Amount Paid: $ </span> 
    <span style="display: table-cell; border-bottom: 1px solid black;"></span> 
</p> 

Answer 2

Si no le importa si especifica el ancho de la línea, usted puede hacer esto:

<span style="border-bottom: 1px solid black; padding-left: 50px">&nbsp;</span> 

Answer 3

Si No está preocupado por el soporte para navegadores más antiguos (generación IE6), siempre está usando la propiedad min-width para obtener una cantidad predeterminada de espacio en blanco que se expande según sea necesario.

<p> 
    <span>Amount Paid: $ </span> 
    <span style="border-bottom: 1px solid black; min-width: 100px;"> </span> 
</p> 

Tenga en cuenta que para IE7, habría que añadir una overflow: visible al elemento-min ancho para que trate min-width correctamente, en lugar de que es por defecto (con errores) el comportamiento de tratarla como la anchura.

Answer 4

Esto funciona en el año 2014.

Amount Paid: $ <span style="text-decoration: underline; white-space: pre;">     </span> 

Answer 5

Otra solución utilizando disply: flex; y flex-grow:

.container { 
 
    width: 200px; 
 
} 
 

 
.row { 
 
    display: flex; 
 
} 
 

 
.underline { 
 
    flex-grow: 1; 
 
    border-bottom: 1px solid black; 
 
    margin-left: 5px; 
 
}

<div class='container'> 
 
    <div class='row'> 
 
     <div class='label'>Count:</div> 
 
     <div class='underline'></div> 
 
    </div> 
 
    <div class='row'> 
 
     <div class='label'>Amount Paid:</div> 
 
     <div class='underline'></div> 
 
    </div> 
 
</div>