How to use line-clamp with a input field

Question

I'm trying to display text on 4 lines within an input field, but nothing seems to work. Does line-clamp work with input or it's just a p tags thing?

.line-clamp {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
}

Edit: The user can write a note title in the input field and if the title is too long that's where the line-clamp should start working

Answer 1

Use textarea instead of input and limit the size by rows and cols attribute

<textarea rows="3" ></textarea>