¿Cómo imprimir texto encima de una línea?

I have to make a UI of a reciept page, in which I have to print text above the line.

Aquí hay una imagen de ejemplo:


The option of showing underline below text by using text-decoration property is not working as it just displays line under the text. I also tried by setting border-bottom of the table but it is not working either.

What I need to do is to draw a lengthy horizontal line and I can print text above it. How can I achieve this desire result?

I need it to be IE > 7 compatible.

preguntado el 05 de mayo de 13 a las 14:05

Did you try tile background images? -

Funcionó para mí. stackoverflow.com/questions/10040842/…. I guess no need to keep this question. Should I delete? -

Happy for you, although you already mentioned that border-bottom no funcionó. -

@JEES I was missing something in it -

1 Respuestas

Considera usar input fields with a border-bottom style declaration. Also, since the fields are meant for display purposes only, you should set them with the readonly attribute, so users cannot alter their contents.

Por ejemplo:


<input type="text" value="some text goes here" readonly>
<input type="text" value="another field" readonly>
<input type="text" value="some more" readonly>
<input type="text" value="1234" readonly>


input {display:block;border:none;border-bottom:1px solid #000;}

Ver Demostración de jsFiddle

Note the values of the fields should be properly escaped before they are included in the HTML. For example, in PHP the values can be escaped with the htmlspecialchars() or htmlentities() funciones.

contestado el 15 de mayo de 13 a las 20:05

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.