如何在Streamlit中使用streamlit_scrollable_textbox实现文本两端对齐？

方法1：通过HTML包裹文本实现精准对齐 #

streamlit_scrollable_textbox支持传入HTML内容，你可以把目标文本放在设置了text-align: justify样式的<div>中，同时添加text-justify: inter-word优化英文文本的两端对齐效果。修改后的代码如下：

import streamlit as st
import streamlit_scrollable_textbox as stx

# 修正原HTML标签闭合顺序错误
Purpose = '<div style="text-align: center; font-size:30px"><span style="font-family: Georgia;">Purpose</span></div>'
st.write(Purpose, unsafe_allow_html=True)

st.text("")

Responsibilities = """Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged."""

# 用HTML div包裹文本并设置两端对齐样式
styled_text = f'<div style="text-align: justify; text-justify: inter-word; line-height: 1.6;">{Responsibilities}</div>'
stx.scrollableTextbox(styled_text, height=450, unsafe_allow_html=True)

st.text("")

# 修正按钮边框样式缺失的solid属性
styled_button = '<div style="text-align:center">' \
            '<button style="background-color:white; color:black; border:2px solid black; border-radius:5px; padding:10px">' \
            'Click to proceed' \
            '</button>' \
            '</div>'
st.write(styled_button, unsafe_allow_html=True)

核心改动说明：

• 给文本添加text-align: justify实现两端对齐，text-justify: inter-word优化英文单词间距
• 调用stx.scrollableTextbox时传入unsafe_allow_html=True，确保HTML样式生效
• 修复原按钮样式中border:2px black的语法错误，补充solid属性让边框正常显示

方法2：注入全局CSS统一批量修改 #

如果需要让所有scrollableTextbox默认应用两端对齐，无需逐个修改文本内容，直接注入全局CSS即可：

import streamlit as st
import streamlit_scrollable_textbox as stx

# 注入全局CSS，定位stx滚动文本框组件设置样式
st.markdown("""
<style>
.stx-scrollable-textbox {
    text-align: justify !important;
    text-justify: inter-word !important;
    line-height: 1.6;
}
</style>
""", unsafe_allow_html=True)

Purpose = '<div style="text-align: center; font-size:30px"><span style="font-family: Georgia;">Purpose</span></div>'
st.write(Purpose, unsafe_allow_html=True)

st.text("")

Responsibilities = """Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged."""

stx.scrollableTextbox(Responsibilities, height=450)

st.text("")

styled_button = '<div style="text-align:center">' \
            '<button style="background-color:white; color:black; border:2px solid black; border-radius:5px; padding:10px">' \
            'Click to proceed' \
            '</button>' \
            '</div>'
st.write(styled_button, unsafe_allow_html=True)

这种方法适合存在多个滚动文本框的场景，一次设置全局生效。

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