Cuando se utiliza un de ancho fijo fuente, me gustaría especificar el ancho de un elemento HTML en personajes.

El «em» la unidad debe ser el ancho de la M de caracteres, por lo que debe ser capaz de utilizar para especificar una anchura. Este es un ejemplo:

<html>
  <head>
    <style>
      div {
        font-family: Courier;
        width: 10em;
      }
    </style>
  </head>
  <body>
    <div>
      1 3 5 7 9 1 3 5 7 9 1
    </div>
  </body>
</html>

El resultado no es lo que yo quería como el navegador saltos de línea después de la columna 15, no 10:

1 3 5 7 9 1 3 5
7 9 1

(Resultado de Firefox y Chromium, tanto en Ubuntu.)

Artículo de Wikipedia dice que un «em» no es siempre el ancho de una M, por lo que definitivamente se parece a la «em» unidad no puede ser de confianza para este.

  • Yo creo que «es» es también un ancho; es el ancho de un dígito en la tipografía. Que podría funcionar mejor para usted.
  • El ‘em’, la propiedad se utiliza el tamaño de fuente, o la altura, de la fuente, no el ancho de las letras. @Pete: no Lo está, consulte los Valores de CSS y Unidades de Módulo de Nivel 3.
  • A menos que usted está utilizando una fuente de ancho fijo, diferentes personajes tienen anchos diferentes. Por lo tanto, es funcionalmente imposible establecer una anchura en términos de número de caracteres que se muestra.
  • posibles duplicados de Cómo ajustar el ancho de <div> para que se ajuste constante del número de cartas en la fuente monoespaciada?
  • «Esta pregunta todavía necesita 4 votos(s) de otros usuarios para cerrar» – Hey, es mi pregunta! Permítanme cerrar!

3 Comentarios

  1. 22

    1em es la altura de una M, más que el ancho. Mismo ocurre con el ex, que es la altura de una x. Más en general, estas son las alturas de las letras mayúsculas y minúsculas.

    Ancho es totalmente una cuestión diferente….

    Cambiar su ejemplo de arriba para

    <div>
        <span>1</span> 3 5 7 9 1 3 5 7 9 1
    </div>

    y te darás cuenta de la anchura y la altura de la envergadura son diferentes. Para un tamaño de fuente de 20px en Chrome el intervalo es 12×22 px, donde 20px es la altura de la fuente, y 2px son para la altura de la línea.

    Ahora ya em y ex son de uso aquí, una posible estrategia para un CSS-la única solución sería

    1. Crear un elemento que contiene sólo un &nbsp;
    2. Dejar autosize en sí
    3. Lugar de su div dentro y
    4. Hacer es 10 veces más grande que la rodea elemento.

    Yo sin embargo no administrar este código de seguridad. También dudo que realmente es posible.

    La misma lógica podría sin embargo ser implementado en Javascript. Estoy usando omnipresente jQuery:

    <html>
      <head>
        <style>
          body { font-size: 20px; font-family: Monospace; }
        </style>
        <script 
          type="text/javascript" 
          src ="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js">
        </script>
      </head>
      <body>
        <div>1 3 5 7 9 1 3 5 7 9 1</div>
        <script>
          $('body').append('<div id="testwidth"><span>&nbsp;</span></div>');
          var w = $('#testwidth span').width();
          $('#testwidth').remove();
          $('div').css('width', (w * 10 + 1) + 'px');       
        </script>
      </body>
    </html> 

    El +1 en (w * 10 + 1) es manejar los problemas de redondeo.

    • Yo estaba esperando un puro CSS solución, que sólo es posible si se conoce la relación entre la altura y el ancho de un carácter (ver stackoverflow.com/questions/1255281/…). Estoy aceptando esto como la respuesta no parece ser una solución sólida.
    • 1em no está a la altura de una M, de acuerdo a las respuestas aquí graphicdesign.stackexchange.com/questions/4035/… El carácter «|» debe estar más cerca de 1em.
    • Sogartar, una aclaración: en la tipografía adecuada 1 em es de hecho el ancho (así como la em de altura) de un ancho fijo de caracteres. Sin embargo, que es «la tipografía adecuada» y tenemos muchos fly-by-noche la gente por ahí la creación de los archivos de fuentes que no se adhieren a reglas tipográficas — especialmente cierto en el caso de fuentes web. El punto de mi comentario aquí no es (simplemente) cascarrabias grandilocuencia. Mi punto es: prueba, prueba, prueba. (Y, a continuación, probar un poco más.)
  2. 175

    ch unidad

    La unidad que estás buscando es ch. De acuerdo a la MDN docs:

    ch: Representa la anchura, o más precisamente el avance de la medida, de que el glifo «0» (cero, el carácter Unicode U+0030) en el elemento de la font.

    Es compatible con las versiones actuales de los navegadores principales (caniuse).

    Ejemplo

    pre {
        width: 80ch; /* classic terminal width for code sections */
    }
    • También existe la la figura de espacio, que es, precisamente, «igual a la anchura de un dígito», como se describe en Wikipedia, espacio (signos de puntuación) artículo. Es el valor Unicode U+2007 y puede ser introducido en HTML utilizando &#x2007; o &#8199;. Es funcionalmente equivalente a la ch unidad de CSS, pero mientras que no está ampliamente soportado, puede ser utilizado como una solución en HTML (feo hack, pero debería funcionar).
    • En realidad, según esta cromo problema, Chrome soporta desde v27, así que ahora las últimas versiones de los principales navegadores (IE, Chrome y Firefox) apoyo a la unidad de ch 🙂
    • Uno debe tener en cuenta el tamaño de los caracteres es el tamaño de la glifo ‘0’ en el elemento de la fuente. Si usted espera más grandes personajes como ‘m’ o ‘w’ usted puede ser que desee considerar la posibilidad de ampliar en consecuencia o ampliar según sea necesario (por ejemplo, stackoverflow.com/questions/7168727/…)
    • muy útil. He añadido un ejemplo.
    • El ch de la unidad considera que la anchura de los ‘0’ – no realmente asegurar, por ejemplo, con max-width: 90ch; que las líneas de texto en realidad todo ser menor o igual a 90 caracteres.
    • sí, sería irresponsable confiar únicamente en esto para hacer, digamos, un emulador de terminal, pero, si la fuente es realmente monoespaciada (al menos para los caracteres en uso) y no hay errores de redondeo, las líneas de debe ser tan largo como se especifica.
    • Sí, no hay problemas con monoespaciada fuentes.
    • Este es mi nuevo favorito de la unidad.
    • IE11 soporta mal. stackoverflow.com/questions/17825638/…
    • caniuse.com/#feat=ch-unit
    • si desea utilizar ch junto con letter-spacing un truco es establecer el ancho de la cantidad de caracteres en ch + (letter-spacing * (cantidad de caracteres – 1)). e.g 5 caracteres con 1px espaciado entre letras: letter-spacing: 1px; width: calc(5ch + 4px).

  3. -1

    ¿Por qué no utilizar una dinámica de ancho para el div y el uso de php para insertar una pausa después de la cantidad deseada de caracteres?
    Sería algo parecido a esto.

    <?php
     $linelength = (chars per line);
     $data = "1 3 5 7 9 1 3 5 7 9 1";
     $lines = strlen($data) / $linelength;
     $count = 0;
     while($count < $lines) {
      echo substr($data, $count*$linelength, $linelength)."<br />";
     }
     if((strleng($data) % $linelength) > 1) {
      echo substr($data, $lines*$linelength)."<br />";
     }
    ?>
    • Este es un CSS pregunta, no trae PHP en ella.

Dejar respuesta

Please enter your comment!
Please enter your name here