Tengo una cadena larga, sin espacios en blanco, y quiero colocarla en un div, de modo que

1. Llena el div tanto como sea posible, sin desbordarse.
2. Utiliza la misma cantidad de caracteres en cada línea (excepto la última, que puede ser menor).

El div es un div receptivo, con un ancho de 90vw y un alto 84vh .

El HTML es:

 <div class = "content"><p><code>Some-very-large-string-without-white-space"</code></p></div>

Escalar la fuente para que encaje es fácil con un poco de JavaScript:

 function font_fiddle (selection) { let element = document . querySelector (selection) let fontSize = element . clientHeight if (!element . innerHTML . length) { return; } element . style . fontSize = fontSize + 'px'; while (element . scrollHeight > element . clientHeight && fontSize > 0) { element . style . fontSize = -- fontSize + 'px'; } }

font_fiddle (".content") se llama cuando se carga el documento y cuando la ventana cambia de tamaño. Esta pieza funciona bien.

El CSS para el elemento de code es:

 code { word-break: break-all; color: lightgreen; background: black; font-style: initial; font-family: 'Source Code Pro', monospace; font-size: 95%; }

Debido a la fuente monoespaciada y al word-break: break-all , esperaría que todas las líneas (con la excepción de la última) tuvieran la misma cantidad de caracteres y un "borde" derecho recto. Y este sería el caso si la cadena contiene solo letras y dígitos. Pero mi cadena no lo hace, y esto lleva a que algunas líneas sean uno o algunos caracteres más cortas de lo posible:

Cambiando el CSS a word-break: break-word; tiene algún efecto, pero todavía nos queda un borde derecho irregular:

¿Hay alguna manera de hacer que cada línea contenga la misma cantidad de caracteres, independientemente de cuáles sean esos caracteres?

Todo esto es con Firefox en MacOS.