React+Tailwind实现输入框文本提前截断且容器宽度不变

针对你遇到的问题，这里有几个无需额外依赖的方案，既能保留输入框右侧留白，又不会改变容器宽度：

方案1：父容器固定宽度（最推荐） #

把输入框套在一个固定宽度的父容器里，让输入框占满父容器宽度，同时通过pr-6添加右侧内边距。Tailwind默认的box-border会把内边距包含在输入框的宽度计算中，不会撑开容器。

代码示例：

<div className="w-64"> {/* 这里可以替换成你需要的宽度，比如w-full、w-48等 */}
  <input 
    type="text" 
    id="username" 
    name="username" 
    className="rounded-md ml-3 pl-1 outline-0 w-full pr-6"
  />
</div>

原理：父容器限制了整体宽度，输入框的w-full让它完全填充父容器，pr-6的内边距被包含在输入框的宽度内，所以光标永远不会顶到输入框的最右侧，始终保留留白，同时容器宽度完全不变。

方案2：直接用calc计算输入框宽度 #

如果不想额外加父容器，可以用calc()直接计算输入框的宽度，减去pr-6对应的内边距值（pr-6等于1.5rem，也就是24px），确保总宽度和原来一致。

代码示例：

<input 
  type="text" 
  id="username" 
  name="username" 
  className="rounded-md ml-3 pl-1 outline-0 w-[calc(150px-24px)] pr-6"
/>

说明：把150px替换成你原本输入框的宽度，这样输入框的总宽度还是原来的数值，pr-6的内边距不会让它变宽，同时右侧保留留白。

方案3：文本溢出时显示省略号 #

如果需要文本过长时自动截断并显示省略号，同时保留右侧留白，只需在方案1的基础上添加overflow-hidden whitespace-nowrap text-ellipsis类：

<div className="w-64">
  <input 
    type="text" 
    id="username" 
    name="username" 
    className="rounded-md ml-3 pl-1 outline-0 w-full pr-6 overflow-hidden whitespace-nowrap text-ellipsis"
  />
</div>

效果：当文本长度超过输入框可视宽度（减去右侧留白）时，文本会自动截断并显示省略号，光标操作时依然保留右侧留白，容器宽度不变。

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