Bootstrap 5个浮动标签重叠答案

【问题标题】：Bootstrap 5 floating labels overlappingBootstrap 5个浮动标签重叠
【发布时间】：2021-09-05 22:00:47
【问题描述】：

anyboy 是否有一个解决方案可以在没有溢出隐藏/省略号的情况下可视化较长的文本，其中相关文本被截断？因为当你只看到它的一半时，输入字段的一些问题毫无意义。基于官方 Bootstrap 5 浮动标签示例页面的问题：

【问题讨论】：

浮动标签从可用性的角度来看非常糟糕，所以恕我直言，最好的解决方案就是放弃它们。
@CBroe 好吧，这不是一个“解决方案”，如果没有找到解决方案，它最终会是什么：D
浮动标签一开始并不是解决方案，它们是一个问题。 medium.com/simple-human/… 他们是设计师的虚荣心，以牺牲可用性为代价。
@CBroe 我在我的网站上遇到的大部分问题并已全部修复：没有空间，小文本难以阅读，它们需要空间才能移动，对比度差，位置不一致 - 但是是的，你是对的 - 他们是麻烦制造者......困难的是，当前的问题将迫使我删除我所有与以前的问题有关的工作。正如你所提到的，我最终会抛弃它们:-(

标签： css twitter-bootstrap flexbox bootstrap-5 floating-labels

【解决方案1】：

您可以使用自动换行。

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;
}

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

【讨论】：

没有真正的工作，只要你只使用占位符然后变得不可见你就可以了 - 但认真的形式看起来如何，只有答案。想象一下只是数字答案：D。 1,2,1,3,1 - 什么地方相关的问题？
只有数值时，可以使用。无论如何，我提供了一个代码 sn-p。这不是你想要的吗？
不，一旦您回复/回答，您就看不到它的相关问题numeric input field eg - 我只想要一个“简单”的包装，以便问题仍然可读