Soy nuevo en la codificación, así que espero que esto no sea demasiado claro:

Estoy aprendiendo Javascript, CSS y HTML haciendo una calculadora HTML simple cuya pantalla es un área de texto (a menos que haya una mejor opción para lo que describo a continuación).

Me gustaría que el contenido del área de texto tuviera la misma altura que al principio, y se hiciera más pequeño a medida que los números requieren más ancho. Sin embargo, me gustaría que haya un tamaño de texto en particular en el que comience a ajustarse (pasar a la siguiente línea) sin desbordarse. Idealmente, el texto continuaría haciéndose más pequeño y envolviéndose en más líneas para encajar en el área de texto (esto puede no ser práctico para una calculadora real, pero también es un ejercicio de diseño).

He intentado algunas formas con word-break, word-wrap y overflow-wrap, pero ninguna ha tenido ningún efecto, imagino que también podría requerir un script y tal vez una definición más matizada del tamaño del área de texto.

Esto puede ser complejo o demasiado ambicioso, ¡pero me gustaría ver si es posible primero! Muchas gracias por adelantado.