如何在 Streamlit 中将文本宽度设置为列答案

【问题标题】：How to set text width to column in Streamlit如何在 Streamlit 中将文本宽度设置为列
【发布时间】：2022-01-08 18:46:03
【问题描述】：

我刚开始使用Streamlit 创建一个应用程序，但遇到一个问题，文本不符合容器（列）宽度：

sequences = []
labels = ["first", "second"]
with st.form(key="fasta_dropdown"):
    f_cols = st.columns(2)
    for i, col in enumerate(f_cols):
        id = col.selectbox(
            f"Select {labels[i]} FASTA", fasta_df["ID"], key=i
        )
        seq = get_sequence_by_id(fasta_df, id)
        sequences.append(seq)
        with col.expander(label="View sequence"):
            st.markdown("""
            MVLSEGEWQLVLHVWAKVEADVAGHGQDILIRLFKSHPETLEKFDRFKHLKTEAEMK
           ASEDLKKHGVTVLTALGAILKKKGHHEAELKPLAQSHATKHKIPIKYLEFISEAIIHV
            LHSRHPGNFGADAQGAMNKALELFRKDIAAKYKELGYQG
            """
            )

    dropdown_submit = st.form_submit_button("Apply sequences")

我该如何解决这个问题？使用style="width: 10%" 将文本转换为HTML 格式不会改变任何内容。

【问题讨论】：

标签： python streamlit

【解决方案1】：

您可以使用 CSS 属性 word-wrap:break-word;，如果单词对您的宽度来说太长，它将中断。

代码：

st.markdown("""<span style="word-wrap:break-word;">MVLSEGEWQLVLHVWAKVEADVAGHGQDILIRLFKSHPETLEKFDRFKHLKTEAEMK
            ASEDLKKHGVTVLTALGAILKKKGHHEAELKPLAQSHATKHKIPIKYLEFISEAIIHV
            LHSRHPGNFGADAQGAMNKALELFRKDIAAKYKELGYQG</span>""", unsafe_allow_html=True)

例子：

import streamlit as st

col1, col2 = st.columns(2)

col1.subheader("Col 1")
col1.markdown("""<span style="word-wrap:break-word;">MVLSEGEWQLVLHVWAKVEADVAGHGQDILIRLFKSHPETLEKFDRFKHLKTEAEMK
                ASEDLKKHGVTVLTALGAILKKKGHHEAELKPLAQSHATKHKIPIKYLEFISEAIIHV
                LHSRHPGNFGADAQGAMNKALELFRKDIAAKYKELGYQG</span>""", unsafe_allow_html=True)

col2.subheader("Col 2")
col2.markdown("""<span style="word-wrap:break-word;">MVLSEGEWQLVLHVWAKVEADVAGHGQDILIRLFKSHPETLEKFDRFKHLKTEAEMK
                ASEDLKKHGVTVLTALGAILKKKGHHEAELKPLAQSHATKHKIPIKYLEFISEAIIHV
                LHSRHPGNFGADAQGAMNKALELFRKDIAAKYKELGYQG</span>""", unsafe_allow_html=True)

输出：

【讨论】：