Encontré una forma de solucionar mi problema, no pude completar la ultima linea del elemento <p> con guiones(-)
, pero se me ocurrió una posible solución
, les platico.
después de tanto pensar
se me ocurrió agregar una caja de texto al final del texto y con la ayuda de una función en javascript obtener su posición y restarselo al tamaño del contenedor, después redimencionar la caja de texto. aquí les dejo el código completo.
Código HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<title>RELLENA CON GUIONES.</title>
<style type="text/css">
body { background: url(http://www.picalls.com/data/media/10/Aullido_solitario.jpg);}
.label { background-color:transparent; color:#FFF; font-weight:bold; border:0px solid transparent; cursor:default;}
#contenedor {width:1010px; border: 2px solid green; color:#FFF; font-weight:bold; text-align: justify;}
</style>
</head>
<body>
<div id="contenedor" >
<table >
<tr>
<td >VI.- Las partes declaran tener capacidad legal para contratar y obligarse, por lo que por medio del presente instrumento convienen el otorgamiento del crédito al tenor de las siguientes:<input type="text" readonly class="label" id="guion" value="-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------"/></td>
</tr>
</table>
</div>
<script type="application/x-javascript">
function getDimensions(oElement) {
var x, y, w, h;
x = y = w = h = 0;
if (document.getBoxObjectFor) { // Mozilla
var oBox = document.getBoxObjectFor(oElement);
x = oBox.x-1;
w = oBox.width;
y = oBox.y-1;
h = oBox.height;
}
else if (oElement.getBoundingClientRect) { // IE
var oRect = oElement.getBoundingClientRect();
x = oRect.left-2;
w = oElement.clientWidth;
y = oRect.top-2;
h = oElement.clientHeight;
}
return {x: x, y: y, w: w, h: h};
}
var myDiv = document.getElementById('guion');
var x1 = getDimensions(myDiv).x;
var myDiv2 = document.getElementById('contenedor');
var w2 = getDimensions(myDiv2).w;
var x=0;
if(x1>10)
x=w2-x1;
else
document.getElementById("guion").style.display="none";//height="0px";
document.getElementById("guion").style.width=x+"px";
</script>
</body>
</html> la ventaja que tienen las cajas de texto es que solo muestran el contenido de acuerdo al tamaño de la caja de texto y no a su contenido
la función la encontré en esta pagina http://snipplr.com/view/8290/
La solución que ofrece
furoya, funciona siempre y cuando el texto tenga un color de fondo pero no cuando tiene un fondo transparente. de todas formas gracias por su ayuda.
