添加换行符以简化文本输入答案

【问题标题】：Add line break to streamlit text input添加换行符以简化文本输入
【发布时间】：2022-09-27 08:58:16
【问题描述】：

我有一个我正在构建的表单，在同一行上包含 3 个文本输入，但是其中一个描述需要 2 行，而其他描述需要 1 行。这导致下面的输入框没有对齐。

我尝试在文本输入中添加回车符和换行符特殊字符，以便文本从低一行开始，但它不起作用。

最终看起来像这样......但我希望我的输入行对齐。


bla bla bla	bla bla bla	bla bla bla
bla bla bla	Input	Input
Input

尝试了以下但不工作

msrp = cols[2].text_input(\"\\n\\r MSRP\")

有什么方法可以在文本中添加换行符，以便我可以让我的输入框低于对齐或其他方式来强制它？

这个“但是其中一个描述需要 2 行而其他描述需要 1 行”是什么意思？
大多数描述都是一两个词，所以打印在一行上。我的一个 desc 需要更多的单词，所以最终打印到 2 行。因此，该行中的输入框不再对齐。
这是一种方法，只需制作一个简短的有意义的标签。有关完整描述，请使用小部件的帮助参数。 a = st.text_input(label, ..., help=\'long description\'

标签： streamlit

【解决方案1】：

使用单元格渲染器使换行符 (\n,\t ...) 更改为 <be> 生效。

仅对显示数据进行测试，可能不会对编辑字段生效

from st_aggrid import AgGrid, GridOptionsBuilder, JsCode

gb = GridOptionsBuilder.from_dataframe(df)
gb.configure_default_column(
        editable=True, wrapText=True, autoHeight=True // here is the key point
    )
cell_renderer = JsCode("""
    function(params) {
    return params.value.replaceAll("\\n","<br>"); // here is the key point
    }
    """)
gb.configure_column('hash_code', cellRenderer=cell_renderer,maxWidth=200)
gbb = gb.build()
AgGrid(df, gbb, height=1000, allow_unsafe_jscode=True, theme='blue')

【讨论】：

【解决方案2】：

.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr;
align-items: end;
}

.col {
padding: 15px;
}

<div class="grid">  
<div class="row">
<div class="col">
<label>blá blá blá  blá blá blá blá blá blá blá blá blá blá blá blá</label>
<input asp-for="First_Name_AR" class="form-control" />
</div>
</div>
<div class="row">
<div class="col">
<label>blá blá blá</label>
<input asp-for="Second_Name_AR" class="form-control" />
</div>
</div>
<div class="row">
<div class="col">
<label>blá blá blá</label>
<input asp-for="Father_Name_AR" class="form-control" />
</div>
</div>
</div>

【讨论】：