如何用CSS实现搜索框仅向下展开适配多行文本

问题出在你当前的居中逻辑上：top:50% + transform: translate(-50%, -50%)是让元素的中心点固定在屏幕中间，当文本换行导致元素高度增加时，中心点会跟着上下偏移，看起来就是向两侧扩展。要实现仅向下展开，需要把元素的顶部边缘固定在初始的居中位置，让内容只向下延伸。

修改后的完整代码 #

CSS部分

.center-container {
  position: absolute;
  /* 让容器顶部对齐屏幕垂直中点 */
  top: 50%;
  left: 50%;
  /* 仅水平方向居中，垂直方向不偏移 */
  transform: translateX(-50%);
  /* 固定单行时的最小高度，保持初始位置稳定 */
  min-height: 60px; /* 可根据你单行文本的实际高度调整 */
}

.input-field {
  position: relative;
  background-color: var(--inputFieldBGDark);
  color: var(--textDark);
  border-radius: 30px;
  padding: 10px;
  width: 400px;
  height: fit-content;
  display: flex;
  margin: 5px 0 0 0; /* 移除上下margin，避免干扰布局 */
  overflow: visible; /* 允许内容向下扩展，不被截断 */
}

.input-field-text {
  font-family: "Courier New", Courier, monospace;
  flex: 1;
  font-size: 28px;
  font-weight: bold;
  user-select: none;
  white-space: pre-wrap; /* 修正无效的wrap值，支持自动换行并保留格式 */
  overflow: visible;
  /* 移除text-overflow，因为要显示完整多行文本 */
}

HTML部分（仅调整类名顺序，不影响功能）

<div class="center-container">
  <div class="input-field">
    <img id="search-icon" src="../public/magnifying-glass-dark.svg" alt="Search Icon" class="input-field-icon" />
    <div class="input-field-text">
      <Typewriter options={{ strings: texts, autoStart: true, loop: true, delay: "natural", pauseFor: 2000, cursor: "_", }} />
    </div>
  </div>
</div>

关键修改说明 #

1. 居中逻辑调整：把垂直方向的偏移去掉，只保留水平居中，让容器顶部固定在屏幕垂直中点，高度增加时只会向下延伸。
2. 溢出处理：将overflow: hidden改为visible，确保多行文本不会被裁剪。
3. 换行属性修正：把无效的white-space: wrap替换为pre-wrap，既支持自动换行，又能保留文本格式。

小提示 #

如果不确定单行时的高度，可以用浏览器开发者工具选中.input-field，查看它的实际高度，再把.center-container的min-height设置为这个数值，保证初始位置完全符合预期。

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