Necesito un párrafo editable de una línea de modo que el texto insertado en él no desborde su tamaño.

Actualmente estoy usando CSS para tratar de ocultar el desbordamiento y también para evitar varias líneas (al no mostrar los elementos secundarios del párrafo).

Sin embargo, idealmente necesito que el texto insertado en el párrafo se "corte" tan pronto como se desborde.

Este es mi código hasta ahora (también en JSFiddle ):

 div { width: 50vw; height: 50vh; margin: 10px auto; background-color: gray; } p { position: absolute; left: 50%; transform: translateX(-50%); width: 25%; background-color: brown; text-align: center; white-space: nowrap; overflow-x: hidden; } /* Avoiding multiple lines */ p * { display: none; }

 <div> <p contentEditable="true"> Edit me! Unfortunally I can be overflowed... :( </p> </div>