Truncate floating labels

[gerhard-lechner]

Prerequisites

• I have searched for duplicate or closed issues
• I have validated any HTML to avoid common problems
• I have read the contributing guidelines

Describe the issue

I realised that floating labels tend to get ugly if the label text is longer than the input field, pls see my pen link below.

This can be fixed by adding .w-100 and .text-truncate to the label. However, I would like to suggest that this should be the default without the need for any additional classes as a multiline floating label is never desirable.

Reduced test cases

https://codepen.io/gerhard-lechner/pen/GRQgQyW

What operating system(s) are you seeing the problem on?

macOS

What browser(s) are you seeing the problem on?

Chrome

What version of Bootstrap are you using?

v5.1

[mdo]

What's the typical use case for super long labels like that?

[gerhard-lechner]

Sorry about the title.

My real-world scenario is more a combination of a smaller field (on mobile) and a somewhat longer label: In a registration form you can enter a name prefix like "Dr." and also a name suffix like "MBA". These fields are typically not very large as the input value is most likely short too. In German one would use labels like "Titel vorangestellt" and "Titel nachgestellt". So not super long, but can be a bit longer than the field on mobile, see screenshots attached.

When cutting these labels you still get what the input value ought to be and avoid kind of a UI bug ...