Currently working on a React project where I have styled the title in a specific way. My goal is to ensure that entire words wrap to the next line seamlessly:
<h1 id="home-title">
<span style={{ color: "#0A8399" }}>Effective Altruists</span>
at
<span style={{ color: "#E83C31" }}>McGill</span>
</h1>
However, without any additional styles applied to home-title
, the title ends up escaping the viewport like this:
https://i.sstatic.net/nuxZEm.png
I have experimented with various CSS properties on the title, following suggestions from this question, but none have successfully led to the complete word "McGill" wrapping onto the next line. The closest result was achieved with:
#home-title {
overflow-wrap: break-word;
}
which resulted in the following output:
https://i.sstatic.net/SFUgam.png
Is there something crucial that I am overlooking? Any assistance would be greatly appreciated.