Pregunta

Este es mi código:

<div style="position:absolute;top:300px;width:50px;height:50px;background:red;color:black;word-wrap:break-word;">
        <div contenteditable=true>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            aaaaa
            bbbbbbbbbbb
        </div>
</div>

Quiero llenar todo el espacio en el div.

¿Cuántos píxeles es el &nbsp;?

¿Fue útil?

Solución

Se puede crear un <div> contiene &nbsp; y asignar una id. Ajuste el tamaño de la fuente y los atributos. A continuación, lea la anchura y la altura actual usando:

var space=document.getElementById("space");
var height=(space.clientHeight+1)+"px";
var width=(space.clientWidth+1)+"px";

Otros consejos

Depende de la fuente, el tamaño, etc. No hay ecuación / número directo para espacios a píxeles.

Es depende del tamaño de la fuente porque &nbsp; es un carácter de espacio en blanco.

No hay manera de responder a esta pregunta honestidad, como el tamaño de un espacio cambia dependiendo del tamaño de la fuente.

Trate de esto, el cambio de "30px" a lo que quieran.

<div style="position:absolute;top:300px;width:50px;height:50px;background:red;color:black;word-wrap:break-word;">
        <div contenteditable=true style="margin-left: 30px;">
            aaaaa
            bbbbbbbbbbb
        </div>
</div>

La respuesta dependerá de la fuente que está utilizando y los estilos que se ha dado. Por lo que usted necesita para calcular de forma dinámica en la página.

Uso Javascript para crear un div que se muestra fuera de la página (es decir, a la izquierda: -4000px;} que contiene un carácter Asegúrese de que este elemento tiene el mismo estilo de texto como el de su div contentEditable El ancho de este elemento debe ser.. la anchura del carácter de espacio (asegúrese de que no está incluyendo cualquier relleno o de las fronteras, etc.)

No he probado esto, pero eso es lo que iba a tratar en primer lugar.

Se puede usar "em" en lugar de "píxeles". En primer lugar buscado en Google enlace de "em": http://www.xs4all.nl/~sbpoley /webmatters/emex.html

Trate de dicha construcción

<div style="position:absolute;top:300px;width:{count_of_letters}em; height:50px;background:red;color:black;word-wrap:break-word;">
    <div contenteditable=true>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        aaaaa
        bbbbbbbbbbb
    </div>

Pero mejor olvidar esta idea y el uso de las reglas CSS de otros comentarios en este tema.

Un "em" (anchura 1 carácter) se considera a menudo ser de 16 x 16 píxeles. Por supuesto, si un espectador cambia el tamaño de texto, que iba a cambiar.

No estoy seguro de lo que estamos tratando de hacer, pero si lo que desea es espacio vacío por encima de su texto, que podría poner otro div (véase el texto) dentro de su div, a continuación, establecer un "margin-top: 10em;. "(o sin embargo muchos ems desea) para proporcionar el espacio en blanco

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top