【问题标题】: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;
}
<input type="text" placeholder="Anzahl der am 17.07. (seit min 14 Tagen!) vollstandig geimpften/von Corona genesenen Personen" size="30">

【讨论】:

  • 没有真正的工作,只要你只使用占位符然后变得不可见你就可以了 - 但认真的形式看起来如何,只有答案。想象一下只是数字答案:D。 1,2,1,3,1 - 什么地方相关的问题?
  • 只有数值时,可以使用。无论如何,我提供了一个代码 sn-p。这不是你想要的吗?
  • 不,一旦您回复/回答,您就看不到它的相关问题numeric input field eg - 我只想要一个“简单”的包装,以便问题仍然可读
猜你喜欢
  • 2021-06-26
  • 2021-07-05
  • 1970-01-01
  • 2017-01-27
  • 2022-10-24
  • 1970-01-01
  • 2019-05-22
  • 1970-01-01
  • 2021-11-17
相关资源
最近更新 更多