Bootstrap 5 floating labels overlapping

Question

does anyboy have a solution for visualizing longer text without overflow hidden/ellipsis, where the related text is truncated? Cause some questions of input fields make no sense while u just see the half of it. The problem based on the official Bootstrap 5 example page for floating labels:

Answer 1

You can use autowrap.

input{
    height:50px;
}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    white-space:pre-line;  
    position:relative;
    top:-15px;
}

::-moz-placeholder { /* Firefox 19+ */
    white-space:pre-line;  
    position:relative;
    top:-15px;
}

:-ms-input-placeholder { /* IE 10+ */
    white-space:pre-line;  
    position:relative;
    top:-15px;
}

:-moz-placeholder { /* Firefox 18- */
    white-space:pre-line;  
    position:relative;
    top:-15px;
}

<input type="text" placeholder="Anzahl der am 17.07. (seit min 14 Tagen!) vollstandig geimpften/von Corona genesenen Personen" size="30">

Answer 2

I used them in a lot of forms on a site and ran into the same problem, longer text labels are overlapping the input and select values. However the solution I used without replacing the entire html to ditch them was to set their position to relative. By default they are positioned as absolute. Just a line of css to change the positioning to relative will make them display under the input element.

.form-floating > label {
    position: relative !important;
}