如何实现input输入框宽度随输入内容自适应伸缩无固定尺寸

你可以根据需求选择以下两种方案，直接修改现有React + Styled Components代码即可实现效果。

方案1：纯CSS轻量实现 #

该方案无需额外JS逻辑，改造成本最低，适合对适配精度要求不极端的场景。核心是利用ch单位（对应当前字体下数字0的宽度）设置输入框宽度，配合最小宽度保证placeholder正常显示。
直接修改现有Input组件样式即可：

const Input = styled.input`
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 21px;
    color: #455560;
    border: 0;
    background: transparent;
    display: inline-block; /* 替换原代码的display: flex，input元素不支持flex布局 */
    padding: 0; /* 清除浏览器默认内边距，避免宽度计算偏差 */
    outline: none;
    /* 新增宽度自适应相关样式 */
    min-width: 9ch; /* 最小宽度，可根据"New Skill"的字符长度微调，保证placeholder完整显示 */
    width: auto;
    max-width: 30ch; /* 可选：设置最大宽度阈值，避免输入过长内容撑破外层容器 */

    &::placeholder{
        color: #0056FC;
    }
`

注意：非等宽字体下不同字符宽度存在差异，ch单位计算的宽度可能存在1-2字符的误差，适当调大min-width预留冗余即可解决。

方案2：JS辅助100%精准适配 #

如果需要完全贴合文本宽度（支持中文、特殊符号、全角/半角字符混输场景），可以通过和输入框样式完全一致的隐藏镜像元素同步文本内容，动态获取真实文本宽度赋值给输入框，适配所有场景无误差。

第一步：调整组件逻辑与JSX结构 #

import { useState, useRef, useEffect } from 'react';

// 你的组件内部
const [inputValue, setInputValue] = useState('');
const mirrorRef = useRef(null);
const inputRef = useRef(null);

// 输入内容变化时同步宽度
useEffect(() => {
    if (mirrorRef.current && inputRef.current) {
        inputRef.current.style.width = `${mirrorRef.current.offsetWidth}px`;
    }
}, [inputValue]);

return (
    <Container {...props}>
        {/* 隐藏的镜像文本节点，用于计算真实文本宽度 */}
        <Mirror ref={mirrorRef}>
            {inputValue || 'New Skill'}
        </Mirror>
        <Input 
            ref={inputRef}
            placeholder="New Skill" 
            value={inputValue}
            onChange={(e) => setInputValue(e.target.value)}
        />
        <AddIcon color="#0056FC" />
    </Container>
)

第二步：新增镜像元素样式，调整原有组件样式 #

const Container = styled.section`
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 7px 10px;
    gap: 10px;
    background: transparent;
    border-radius: 4px;
    border: 1px solid ${props => props.theme.border};
    position: relative; /* 作为内部绝对定位镜像元素的定位参照 */
`

const Mirror = styled.span`
    /* 字体样式必须和Input完全一致，保证宽度计算准确 */
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 21px;
    /* 隐藏元素但保留宽度计算能力 */
    position: absolute;
    visibility: hidden;
    white-space: pre;
    pointer-events: none;
`

const Input = styled.input`
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 21px;
    color: #455560;
    border: 0;
    background: transparent;
    padding: 0;
    outline: none;
    min-width: 1px;

    &::placeholder{
        color: #0056FC;
    }
`

该方案下输入框宽度会完全匹配输入内容长度，不会出现内容截断、多余留白的问题。

内容的提问来源于stack exchange，提问作者nevoni3008