Kevin Powell - Community•6mo ago

How to stop sentence from breaking before certain words?

I have a set of category titles that all have the Unicode character fora down arrow at the end of the title. What I would like to do, somehow, is that as the divs that the titles are in shrink the titles are broken up from a single line to multiple lines EXCEPT for the Unicode character. I want that to always be on the same line as the last word of the title. Here is the HTML and relevant CSS:

<body>
    <header id="siteHeader">
        <nav id="siteNavigation">
            <img id="siteLogo" width="225" height="50"  />
            <div class="parentCategory">Main Series &#x25BE;</div>
            <div class="parentCategory">Compilation of FFVII &#x25BE;</div>
            <div class="parentCategory">Other Game Series &#x25BE;</div>
            <div class="parentCategory">Standalone Games &#x25BE;</div>
            <div class="parentCategory">Chocobo Games &#x25BE;</div>
            <div class="parentCategory">Media &#x25BE;</div>
            <div class="parentCategory">Collections &amp; Other Info &#x25BE; </div>
            <form id="headerSearch" action="/site-search" method="get">
                <input type="image" src="/Images/Search.svg" alt="Submit" width="24" height="24" />&nbsp;
                <input type="text"name="query" />
            </form>
        </nav>
    </header>
</body>

body{
    display: grid;
    font-family: DM Sans;
    grid-template-areas: "siteHeader siteHeader" "sectionNavigation main" "sectionNavigation footer";
    grid-template-columns: var(--sectionNavigationWidth) 1fr;
    grid-template-rows: 3.5rem 1fr;
    margin: 0 auto;
    max-width: 1920px;
    min-height: 100vh;}
#siteHeader{
    grid-area: siteHeader;
    position: sticky;
    padding: 0.1rem;
    top: 0;
    /*white-space: nowrap;*/}
#siteNavigation{display: flex;}
#sectionNavigation{
    grid-area: sectionNavigation;
    padding: 0.5rem;}
.parentCategory{
    align-self: center;
    padding-left: 1.25rem;
    text-align: center;
    text-transform: uppercase;}

<body>
    <header id="siteHeader">
        <nav id="siteNavigation">
            <img id="siteLogo" width="225" height="50"  />
            <div class="parentCategory">Main Series &#x25BE;</div>
            <div class="parentCategory">Compilation of FFVII &#x25BE;</div>
            <div class="parentCategory">Other Game Series &#x25BE;</div>
            <div class="parentCategory">Standalone Games &#x25BE;</div>
            <div class="parentCategory">Chocobo Games &#x25BE;</div>
            <div class="parentCategory">Media &#x25BE;</div>
            <div class="parentCategory">Collections &amp; Other Info &#x25BE; </div>
            <form id="headerSearch" action="/site-search" method="get">
                <input type="image" src="/Images/Search.svg" alt="Submit" width="24" height="24" />&nbsp;
                <input type="text"name="query" />
            </form>
        </nav>
    </header>
</body>

body{
    display: grid;
    font-family: DM Sans;
    grid-template-areas: "siteHeader siteHeader" "sectionNavigation main" "sectionNavigation footer";
    grid-template-columns: var(--sectionNavigationWidth) 1fr;
    grid-template-rows: 3.5rem 1fr;
    margin: 0 auto;
    max-width: 1920px;
    min-height: 100vh;}
#siteHeader{
    grid-area: siteHeader;
    position: sticky;
    padding: 0.1rem;
    top: 0;
    /*white-space: nowrap;*/}
#siteNavigation{display: flex;}
#sectionNavigation{
    grid-area: sectionNavigation;
    padding: 0.5rem;}
.parentCategory{
    align-self: center;
    padding-left: 1.25rem;
    text-align: center;
    text-transform: uppercase;}

2 Replies

MarkBoots•6mo ago

instead of a regular space, you can use a no-break-space:  

Matthew Alexandros•6mo ago

I kind of feel stupid on this one. I did try the no-break-space and it did not work but after you suggested it I relaized the category names are programicly generated and that the way I coded it there was a normal space between the work and the no-break-spaceI tried. I jsut updated my code and it is working as it should.

Gaming

Programming

How to stop sentence from breaking before certain words?