Prevent truncation (w/ ellipsis) of selected values in multiselect input field

Using Streamlit
,
1

The Issue

When you select options in a multiselect input field (st.multiselect), streamlit truncates the text if the text is longer than some character threshold.

Example: When selected, the option “Some really long string” is truncated to “Some really long…”.

After failing to find the correct answer online, I managed to solve this issue myself and wanted to create a post in case anyone else faced the same issue.

Below is the solution which worked for me, which is a bit of a CSS hack:

    st.markdown("""
        <style>
            .stMultiSelect [data-baseweb="select"] span{
                max-width: none !important;
                white-space: normal !important;
                overflow: visible !important;
                text-overflow: clip !important;
            }
        </style>
        """, unsafe_allow_html=True)
    st.multiselect(
        label="Select an option below and watch how it's not trunctated! :)",
        key="field_id",
        options=["Short string", "Some really long string", "An even loooooooooonger string"]
    )
1 Like