使用TailwindCSS实现输入框与按钮横向排列及韩文适配问题

原本使用TailwindCSS实现输入框与按钮横向排列的代码可正常显示，但将按钮文字改为韩文后，出现文字竖排且输入框尺寸异常的问题。

原正常代码：

<label for = "rootFolder" class = "flex mb-2 text-sm font-medium text-gray-900 dark:text-gray-300" > Processing Directory </label> <div class = "mb-6 flex" > <input type = "rootFolder" id = "rootFolder" class = "bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder = "" required /> <button class = "text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800" > add </button> </div>

问题原因 #

• 韩文属于东亚表意文字，浏览器默认布局逻辑会对这类文字的排版特性做特殊处理，当按钮内仅包含韩文时，浏览器可能误判元素的文字方向或最小宽度阈值，导致按钮宽度被过度压缩，文字因空间不足被迫竖排。
• 按钮类中的w-full sm:w-auto规则在面对韩文时，最小宽度计算出现偏差：在非sm断点下，按钮优先应用w-full，但韩文的字符特性让浏览器认为元素可被压缩到极小宽度，进而触发文字竖排，同时挤压输入框的可用空间，导致输入框尺寸改变。
• 输入框的w-full是基于flex父容器的剩余宽度分配，当按钮被异常压缩后，flex布局会重新调整空间分配比例，最终造成输入框尺寸异常。

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