¿A cuántos píxeles equivale un espacio?

Question

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  ?

Answer 1

usted puede crear a <div> que contiene   y asigne un id. Establezca el tamaño y los atributos de la fuente. Luego, lea el ancho y la altura actuales usando:

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

Answer 2

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

Answer 3

Depende del tamaño de fuente porque   es un carácter de espacio en blanco.

Answer 4

No hay forma de responder honestamente a esta pregunta, ya que el tamaño de un espacio cambia según el tamaño de la fuente.

Pruebe esto, cambiando el "30px" a lo que quiera.

<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> 

Answer 5

La respuesta dependerá de la fuente que esté utilizando y de los estilos que se le hayan asignado. Por lo tanto, deberá calcularlo dinámicamente en la página.

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

no he intentado esto, pero eso es lo que iba a tratar en primer lugar.

Answer 6

Puede usar "em" en lugar de "px". En primer lugar buscado en Google enlace de "em": http://www.xs4all.nl/~sbpoley/webmatters/emex.html

Tratar 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 utilizar las reglas CSS de otros comentarios en este tema.

Answer 7

A menudo se considera que un "em" (ancho de 1 carácter) es de 16 x 16 píxeles. Por supuesto, si un espectador cambia el tamaño del texto, eso cambiaría.

No estoy seguro de lo que estás tratando de hacer, pero si solo quieres espacio vacío encima de tu texto, podrías poner otro div (para el texto) dentro de tu div, y luego establecer un "margen superior : 10em; "(o cuantos ems quieras) para proporcionar el espacio en blanco.