css - type - Especifique el ancho en*caracteres*
truncar texto css (3)
Cuando utilizo una fuente de ancho fijo , me gustaría especificar el ancho de un elemento HTML en los caracteres .
Se supone que la unidad "em" tiene el ancho del carácter M, por lo que debería poder usarla para especificar un ancho. Esto 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 quería porque la línea del navegador se rompe después de la columna 15, no de la 10:
1 3 5 7 9 1 3 5
7 9 1
(Resultado en Firefox y Chromium, ambos en Ubuntu.)
El artículo de Wikipedia dice que un "em" no siempre es el ancho de una M, por lo que definitivamente parece que la unidad "em" no puede ser confiable para esto.
¿Por qué no usar un ancho dinámico para su div y usar php para insertar un descanso después de la cantidad deseada de caracteres? Sería algo como 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 />";
}
?>
1em es la altura de una M, en lugar del ancho. Lo mismo vale para ex, que es el alto de una x. En términos más generales, estas son las alturas de las letras mayúsculas y minúsculas.
El ancho es un problema totalmente diferente ...
Cambie su ejemplo anterior a
<div>
<span>1</span> 3 5 7 9 1 3 5 7 9 1
</div>
y notará que el ancho y la altura del tramo son diferentes. Para un tamaño de letra de 20px en Chrome, el lapso es de 12x22 px, donde 20px es el alto de la fuente y 2px son para la altura de la línea.
Ahora que em y ex no son de utilidad aquí, una posible estrategia para una solución solo de CSS sería
- Crea un elemento que contenga solo un & nbsp;
- Deje que se autoestructure
- Coloque su div dentro y
- Hazlo 10 veces más grande que el elemento circundante.
Sin embargo, no logré programar esto. También dudo que realmente sea posible.
Sin embargo, la misma lógica podría implementarse en Javascript. Estoy usando jQuery ubicuo aquí:
<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> </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 para manejar problemas de redondeo.
La unidad es ch . No es ampliamente compatible, si MDN es correcto. Es compatible con las versiones actuales de los principales navegadores.
Ejemplo
pre {
width: 80ch; /* classic terminal width for code sections */
}