- 静态内容**
要求是在用户输入某个值后放置H
。但是,当输入超过1个单词时,H
似乎太远。
- 示例1:**使用一个单词:
- 示例1:**使用一个单词:
- 示例2:**具有多个单词
- 示例2:**具有多个单词
代码:https://codesandbox.io/s/infallible-fire-2qsmm5?file=/src/App.js
import "./styles.css";
import "bootstrap/dist/css/bootstrap.min.css";
import { useState } from "react";
export default function App() {
const [val, setVal] = useState("Hello");
return (
<div className="App">
<div className="input-group position-relative">
<div className="form-floating">
<input
type="text"
value={val}
onChange={(e) => setVal(e.target.value)}
className="form-control"
/>
<span
className=""
style={{
position: "absolute",
top: "0.7rem",
left: `${val?.length * 11}px`,
color: "black",
fontSize: "34px",
fontWeight: "bold"
}}
>
H
</span>
</div>
</div>
</div>
);
}
2条答案
按热度按时间xmjla07d1#
解决方案如下:https://codesandbox.io/s/loving-orla-wfljwe?file=/src/App.js
灵感来源:Auto-scaling input to width of value in React
jhiyze9q2#
要给元素添加文本后缀,最简单的解决方案是在
::after
pseudo-element上使用CSS content(而不是编写复杂的JS计算):