如何为Streamlit文本输入添加换行以对齐表单输入框？

针对同一行三个text_input因Label行数不同导致输入框错位的问题，有几种可行的解决方法：

方法1：利用HTML换行+允许HTML渲染 #

Streamlit的text_input支持在Label中使用HTML标签，开启unsafe_allow_html=True参数即可实现Label的强制换行。对于短Label的组件，可添加空换行标签占位，让所有Label高度统一：

import streamlit as st

cols = st.columns(3)

# 两行Label的组件
cols[0].text_input("bla bla bla<br>bla bla bla", unsafe_allow_html=True)
# 一行Label的组件，添加空换行占位
cols[1].text_input("bla bla bla<br>&nbsp;", unsafe_allow_html=True)
cols[2].text_input("bla bla bla<br>&nbsp;", unsafe_allow_html=True)

方法2：自定义CSS统一Label容器高度 #

注入自定义CSS，强制所有text_input的Label容器高度一致，无论Label内容多少，输入框都会自动对齐：

import streamlit as st

# 注入自定义CSS
st.markdown("""
<style>
div[data-testid="stTextInput"] div[data-testid="stMarkdownContainer"] {
    min-height: 48px; /* 调整高度适配两行Label的高度 */
    display: flex;
    align-items: flex-end;
}
</style>
""", unsafe_allow_html=True)

cols = st.columns(3)
cols[0].text_input("bla bla bla\nbla bla bla")
cols[1].text_input("bla bla bla")
cols[2].text_input("bla bla bla")

方法3：拆分Label与输入框布局 #

手动将Label和输入框分开布局，先统一放置所有Label，再在下方放置输入框，彻底避免Label行数影响输入框位置：

import streamlit as st

# 第一行放所有Label
label_cols = st.columns(3)
label_cols[0].markdown("bla bla bla<br>bla bla bla", unsafe_allow_html=True)
label_cols[1].text("bla bla bla")
label_cols[2].text("bla bla bla")

# 第二行放所有输入框
input_cols = st.columns(3)
input_cols[0].text_input("", label_visibility="collapsed")
input_cols[1].text_input("", label_visibility="collapsed")
input_cols[2].text_input("", label_visibility="collapsed")

注意：方法1中直接用\n换行无效，必须使用HTML的<br>标签并开启unsafe_allow_html；方法3中通过label_visibility="collapsed"隐藏输入框自带的Label，避免重复显示。

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