I am in need of a one-line editable paragraph that can contain text without overflowing its size.
Currently, I am using CSS to hide the overflow and prevent multiple lines by not displaying the children of the paragraph.
However, what I really want is for the text within the paragraph to be cut off as soon as it exceeds the allotted space.
Below is the code I have come up with so far (also available on 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! Unfortunately, I can overflow... :(
</p>
</div>