- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我想在已知宽度( overflow hidden )的文本输入中从头到尾转换一行动态占位符文本
现在我知道对于常规容器 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>
我想知道我是否可以使用 placeholder pseudo element 的占位符文本实现上述效果.
所以我尝试了以下方法:
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">
...但是由于占位符伪元素上可用属性的限制,上面的代码片段不起作用
All properties that apply to the ::first-line pseudo-element also apply to the ::placeholder pseudo-element.
不幸的是,transform
1 没有出现在 that list 中.
所以我想知道是否有另一种方法可以实现此目的 - 可能使用占位符伪元素支持的其他属性。
transform
属性似乎(有点)在 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>
关于css - 是否可以从头到尾过渡占位符文本?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55901797/
我非常确定 IoC 是适合我的应用程序的方法。 SO 上有大量文章甚至问题都在讨论不同的容器。我今天阅读了几篇带有部分示例的博客。我个人倾向于从 CommonServiceLocator 和 Unit
这个问题在这里已经有了答案: How to read a text file reversely with iterator in C# (11 个答案) 关闭 3 年前。 我有一个包含一系列价格数
编辑 在经历了如此多的努力却只产生了错误的 .exe 文件之后,我们决定不再花更多的时间尝试生成代码,而是自己编写代码。谢谢大家的宝贵时间。 _/_/_/_/_/_/_/_/_/_/_/_/_/_/_
我正在尝试匹配 span具有特定类名的元素以及其开始和结束之间的所有内容。 我的正则表达式是 /]*"myClass".*?/gi 。它适用于 ... ,但它在类似下面的情况下失败,仅扩展到第一个
我是一名优秀的程序员,十分优秀!