How to Wrap a <h1> Tag if Text is Too Long and Add '...' at the End?

[diogovalentte]

Before clicking “Create Topic”, please make sure your post includes the following information (otherwise, the post will be locked).

1. Are you running your app locally or is it deployed?
   locally
2. If your app is deployed:
   a. Is it deployed on Community Cloud or another hosting platform?
   b. Share the link to the public deployed app.
3. Share the link to your app’s public GitHub repository (including a requirements file ).
   No
4. Share the full text of the error message (not a screenshot).
   No error message
5. Share the Streamlit and Python versions.
   Python 3.10.12, Streamlit 1.31.0

When the text of the <h1> tag is too long to fit within its container, I want the text to wrap onto the next line and display an ellipsis (…) at the end to indicate that it’s truncated. But using the code below, it only wraps the text, but don’t display an ellipsis at the end.

st.markdown(
    f"""<h1 style='text-align: center; font-size: 35px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;'>Long text</h1>""",
    unsafe_allow_html=True,
)

Current result is the image below, where the header is strange:

What I want is something like the image below that wraps a long text:

[diogovalentte]

The code below works:

st.markdown(
    f"""<h1 style='text-align: center; font-size: 35px;'>Long text</h1>""",
    unsafe_allow_html=True,
)

html = """
    <style>
    h1 > div > span {
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    </style>
"""
st.markdown(html, unsafe_allow_html=True)