rellenar un elemento <p> con guiones (-)

[brnb8626]

hola a todos, mi duda es la siguiente:
hay forma de rellenar un elemento <p align="justify"> con guiones(-) para que un parrafo no se quede con las lineas incompletas.
ejemplo:
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:---------------------------------------------------------------------------------------------------------

[furoya]

Yo estoy seguro de haber visto algo así en el foro. Pero creo que era un invento, no sé si está contemplado en HTML5 o algún CSS propietario.
No me puedo acordar cómo era para buscarlo, pero sería raro que fuese javascript.

Mientras tanto, me surgen algunas dudas. ¿Eso te lo manda algún programa ya escrito? Es raro que use un atributo HTML para justificar, en vez de CSS, que te da más posibilidades.
Eso explicaría (aunque no alcanza para excusa) por qué no lo manda en *.pdf o algún formato imprimible. Bueno, tampoco sabemos en qué formato tenés ese documento...

Doy por hecho que es para imprimir. Rellenar un texto que se puede editar desde el código fuente, o que no se puede editar porque es una página web común y corriente, carece de sentido.

· · · · · · · · · · · ·

¡Me acordé! Pero no sé si te sirve.
Era CSS, usaba una capa con un fondo de puntos en imagen y era para completar entre datos que había a la izquierda de la línea (por ejemplo, un ítem o descripción) y el que le correspondía a la derecha (p.e., su precio).
Es posible que llegués a adaptarlo para la última línea de un párrafo (que es la que no se justifica). Habría que ver cómo te manda el programa cada bloque. Quizá haya que reescribirle algo. (¿Podés meterle mano?)

Contanos cómo lo vas haciendo, porque puede ser un trabajo interesante.

P.D.: me olvidaba: ¡Bienvenido!

[emprear]

Iniciado por furoya

Yo estoy seguro de haber visto algo así en el foro. Pero creo que era un invento, no sé si está contemplado en HTML5 o algún CSS propietario.
No me puedo acordar cómo era para buscarlo, pero sería raro que fuese javascript.

Mientras tanto, me surgen algunas dudas. ¿Eso te lo manda algún programa ya escrito? Es raro que use un atributo HTML para justificar, en vez de CSS, que te da más posibilidades.
Eso explicaría (aunque no alcanza para excusa) por qué no lo manda en *.pdf o algún formato imprimible. Bueno, tampoco sabemos en qué formato tenés ese documento...

Doy por hecho que es para imprimir. Rellenar un texto que se puede editar desde el código fuente, o que no se puede editar porque es una página web común y corriente, carece de sentido.

· · · · · · · · · · · ·

¡Me acordé! Pero no sé si te sirve.
Era CSS, usaba una capa con un fondo de puntos en imagen y era para completar entre datos que había a la izquierda de la línea (por ejemplo, un ítem o descripción) y el que le correspondía a la derecha (p.e., su precio).
Es posible que llegués a adaptarlo para la última línea de un párrafo (que es la que no se justifica). Habría que ver cómo te manda el programa cada bloque. Quizá haya que reescribirle algo. (¿Podés meterle mano?)

Contanos cómo lo vas haciendo, porque puede ser un trabajo interesante.

P.D.: me olvidaba: ¡Bienvenido!

No te quiero mentir @furoya, esta mañana estuve leyendo el post y tratando de darle vueltas al asunto (que como ejercicio me pareció por demás interesante en vista de otros lamentables posts que estuve leyendo), y en un momento, me dije, este tema es para @furoya, le voy a pasar el dato... pero me tuve que ir y lo dejé para la vuelta...

Bueno, ya estás por aqui.
volviendo al tema, lo veo un poco dificil, supongo que a la justificación va a compañado una limitación del width del elemento contenedor. hasta ahora todas mis pruebas fueron infructuosas

SAludos

[brnb8626]

De ante mano gracias por contestar, me explico mejor, el párrafo tendrá etiquetas(label) para poder agregar texto de forma dinámica, y lo que se pretende es que la ultima linea del párrafo sea completada con guiones(-), el texto estará justificado, no necesariamente tiene que ser un parrafo puede ser un div o una tabla

[furoya]

A mí tambien me pareció un asunto interesante. No le encuentro utilidad práctica, porque eso de rellenar con guiones es para evitar que le escriban algo en el espacio en blanco, pero en una página web no se le escribe nada. Será por estética, para mantener una línea con los documentos en papel.

Igual estuve pensando un poco, porque creí que se podía hacer con CSS, brnb8626.
Sale, pero es un asco. Dejo un ejemplo, y una aclaración sobre el texto.
Para no usar el clásico Lore Ipsum, copié y pegué un artículo que escribí hace mucho para otro foro sobre curiosidades en algunos relojes. Era más largo, pero con esto me alcanzó para hacer pruebas, porque contiene muchos párrafos (te usé párrafos), y ya que estoy lo dejo.

Código:

<!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">
#elDocumento {width: 80%; margin: 0 auto; }
.elParrafo {text-align: justify; font: 16px/1.2em monospace; margin-top: -.6em; }
.elTexto {position: relative; background-color: white; }
.losGuiones {overflow: hidden; background-color: white; margin: -2.4em 0 2.4em; }
.laAneda {margin-top: 3.6em; }
</style>
</head>
<body>
<h2>Curiosidades sobre relojes.</h2>

<div id="elDocumento">
<p class="elParrafo laAneda">
<span class="elTexto">A pesar de lo que decían los relojeros franceses, los "<i>huevos de nuremberg</i>" no fueron inventados por un tal <b>Otto Nuremberg</b> usando como modelo una parte de su anatomía. En verdad estos relojes tenían la forma y el tamaño de un huevo de gallina, y se fabricaban en la ciudad de <b>Nuremberg</b> (<b>Alemania</b>).</span>
<div class="losGuiones">------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------</div>
</p>
<p class="elParrafo laAneda">
<span class="elTexto">Una discusión que todavía se mantiene es la del origen del "IIII" en vez del "IV", para las carátulas en numeración romana.</span>
<div class="losGuiones">------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------</div>
</p>
<p class="elParrafo">
<span class="elTexto">
La mejor historia —pero la menos creíble— dice que <b>Luis XIV</b> de <b>Francia</b> era muy afecto a los relojes, y un artesano solía llevarle piezas con algún "error" para que el rey lo descubriera. Cuando vio uno con el "4" mal escrito en romano ... no lo notó, y aseguró que el reloj estaba perfecto. El relojero no se animó a contradecirlo; y a partir de entonces, un poco como recuerdo de la anécdota, un poco para lamerle las calzas a <b>Luis</b> y un poco para molestar al relojero, las carátulas francesas empezaron a hacerse con el formato "IIII".</span>
<div class="losGuiones">------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------</div>
</p>
<p class="elParrafo">
<span class="elTexto">
Los <b>Capeto</b> mostraron cierta debilidad por lo artefactos mecánicos. <b>Luis XVI</b> tenía por hobby la cerrajería y la relojería. De hecho, él se decía "Relojero".</span>
<div class="losGuiones">------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------</div>
</p>
<p class="elParrafo">
<span class="elTexto">
Por suerte la moda no prendió en todos los países, y la mayoría de los relojes emblemáticos tienen el número "IV".</span>
<div class="losGuiones">------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------</div>
</p>
<p class="elParrafo">
<span class="elTexto">
Como el <b>Big Ben</b> de <b>Londres</b>.
</span>
<div class="losGuiones">------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------</div>
</p>
<p class="elParrafo laAneda">
<span class="elTexto">Y ya que andamos por el <b>Parlamento Británico</b>, digamos que su reloj no se llama <b>Big Ben</b>, sino <b>Reloj de la Torre de San Esteban</b>.</span>
<div class="losGuiones">------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------</div>
</p>
<p class="elParrafo">
<span class="elTexto">
La historia comienza cuando los obreros intentan subir la campana mayor del carrillón, llamada "<b>Victoria</b>", y descubren que tiene una rajadura en la copa. </span>
<div class="losGuiones">------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------</div>
</p>
<p class="elParrafo">
<span class="elTexto">
Después de un largo debate, llegan a 2 conclusiones</span>
<div class="losGuiones">------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------</div>
</p>

sigue abajo.

[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.]

[brnb8626]

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.

[furoya]

Muy bueno lo de getBoxObjectFor, no sabía que ya existía.

A mí me resultó curioso que postearas en javascript. Por lo general lo primero que uno piensa es que hay una solución CSS.

Con JS es relativamente fácil. De hecho, ni siquiera hace falta poner la caja de texto ni ninguna caja, podemos hacer que el programa escriba los guiones a continuación del último caracter del párrafo hasta completar el "renglón". Ya hice algún ejemplo de ese método, así que no lo repito.
Si vamos a agregar un elemento a la última línea, puede ser cualquiera; con CSS podemos hacer que muestren el contenido de acuerdo al tamaño de la caja, ya está visto en el ejemplo anterior.

Y lo de la lectura de la posición es práctico como cutandpaste, porque lo puede usar cualquiera en cualquier lado, y se supone que funciona. El punto -que venimos machacando desde hace rato- es que si lo vamos a hacer en nuestro documento, no precisamos de esa "compatibilidad", porque ya sabemos dónde ubicamos nuestro relleno de guiones. Con medir sobre lo que tenemos alcanza y sobra.

Te dejo otra versión.

Código:

<!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">
<script type="text/javascript">

function ajusta(){
var losGuiones = "----------------------------------------------------------------------";
var losRellenos = document.querySelectorAll(".elRelleno");
var elAncho = document.getElementById("elTexto").offsetWidth;

for(i=0; i<losRellenos.length; i++){
var aIzquierda0 = losRellenos[i].parentElement.offsetLeft;
var aIzquierda1 = losRellenos[i].offsetLeft;
losRellenos[i].innerHTML = losGuiones;
losRellenos[i].style.width = elAncho - (aIzquierda1 - aIzquierda0) +"px"; 
}

}
</script>
<style type="text/css">
#elTexto {width: 400px; background-color: silver; font-size: 18px; }
.elRelleno {display: inline-block; overflow: hidden; width: 0; height: 1em; 
white-space: nowrap; background-color:red; }
</style>
</head>
<body>
<input type=button onclick="ajusta()" value="Completa">
<div id=elTexto>
alfa bravo charly delta<span class=elRelleno></span><br>
eco foxtrot golf hotel<span class=elRelleno></span><br>
indio julieta kilo mike noviembre<span class=elRelleno></span><br>
</div>
</body>
</html>

Allí hay un par de ajustes por hacer. Si bien a los guiones los saqué del código del "párrafo", como es javascript ni siquiera precisamos de las cajas: también las podemos insertar por programa. Ni aún la cadena de guiones en la variable: la podemos escribir con un loop. Quiero decir, que el código fuente puede quedar todavía más limpio.

De cualquier forma, es loable que hayás encontrado esta solución, y que hayás propuesto algo que valía la pena leer, y probar. Como dice el amigo emprear, es un "ejercicio que me pareció por demás interesante en vista de otros lamentables posts que estuve leyendo".