我想在已知宽度的文本输入中从头到尾转换单行动态占位符文本（隐藏溢出）
现在我知道对于常规容器 div 我可以利用转换来转换正确的长度......
因此，对于长度为 100px 的容器，我可以使用以下命令过渡到文本末尾：transform: translateX(calc(100px - 100%)
div {
width: 100px;
border: 2px solid green;
margin: 10px;
padding: 5px;
}
div {
white-space: nowrap;
overflow: hidden;
}
span {
display: inline-block;
animation: 4s scrollText forwards;
}
@keyframes scrollText {
to {
transform: translateX(calc(100px - 100%));
}
}
<div><span>some really really really long text here</span></div>
我想知道是否可以使用占位符文本实现上述效果占位符伪元素.
所以我尝试了以下方法：
input {
width: 100px;
border: 2px solid green;
margin: 10px;
padding: 5px;
}
input::placeholder {
color: red;
animation: 4s scrollText;
transform: translateX(0);
}
@keyframes scrollText {
from {
transform: translateX(0);
}
to {
transform: translateX(calc(100px - 100%));
}
}
<input type="text" placeholder="some really really really long text here">
...但是由于占位符伪元素上可用属性的限制，上面的代码片段不起作用
所有适用于::第一行伪元素还
适用于 ::placeholder 伪元素。
Unfortunately, transform1 doesn't appear in that list.
所以我想知道是否有另一种方法可以实现这一目标 - 可能使用其他属性are由占位符伪元素支持。
- 奇怪的是，
transform当在没有 calc 函数和动画的情况下使用时，属性似乎（有点）在 Chrome 上工作。
input {
width: 100px;
border: 2px solid green;
margin: 10px;
padding: 5px;
}
input::placeholder {
color: red;
transform: translateX(-50%);
}
<input type="text" placeholder="some really really really long text here">
您可以使用额外的包装器来模拟这一点，而无需在输入元素上真正使用占位符：
input {
width: 100px;
border: 2px solid green;
padding: 5px;
vertical-align:top;
background:transparent; /* a transparent background to show the pseudo element */
}
.input {
display:inline-block;
margin: 10px;
position:relative;
z-index:0;
overflow:hidden;
}
.input:before {
content:attr(placeholder);
position:absolute;
left:5px;
top:5px;
white-space:nowrap; /* no line break */
color: red;
pointer-events:none; /* avoid any interaction */
animation: 4s scrollText forwards;
z-index:-1;
}
@keyframes scrollText {
to {
transform: translateX(calc(100px - 100%));
}
}
/* hide the before on focus */
.input:focus-within:before{
visibility:hidden;
}
/* add background to hide the before when there is text and no focus*/
input:not(:placeholder-shown) {
background:#fff;
}
<div class="input" placeholder="some really really really long text here">
<input type="text" placeholder=" "> <!-- needs an empty placeholder for :placeholder-shown -->
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
