How to prevent the text of an anchor element from breaking if it's multiple words, instead shift it to the next line

Issue

I have a div and inside it, I have links to categories. In mobile view, the links to the categories break up if it has spaces or more than a word.

In this example, if I have "Test" and whatever number together instead of a space, it would work just fine, however, with the spaces, you get the numbers in another line. How do I make this work so that it shifts the entire link to another line so that it doesn't break it? Using white-space and any of its values doesn't really work in this situation since the spaces in the categories are what breaks it.

If possible, I'd like to keep this purely CSS and HTML if possible, unless there's no other way around this.

.postedIn {
  width: 100%;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-10 mx-auto p-md-5 fullPost mb-5">
  <div class="row mt-5 pt-5" id="postCategoryTagContainer" style="width: 280px">
    <div class="col-8 mt-3 postedIn">
        <span id="postedIn">Posted in:</span>&nbsp;<?php the_category('&nbsp;') ?>
        &nbsp;<a href="http://localhost/wordpress/archives/category/test-1" rel="category    tag">Test 1</a>
        &nbsp;<a href="http://localhost/wordpress/archives/category/test-2" rel="category tag">Test 2</a>
        &nbsp;<a href="http://localhost/wordpress/archives/category/test-4" rel="category tag">Test 4</a>
        &nbsp;<a href="http://localhost/wordpress/archives/category/test-5" rel="category tag">Test 5</a>
        &nbsp;<a href="http://localhost/wordpress/archives/category/test3" rel="category tag">Test 3</a>
        &nbsp;<a href="http://localhost/wordpress/archives/category/uncategorized" rel="category tag">Uncategorized</a>    
    </div>
  </div>
</div>

Solution

All you need to add is white-space: nowrap to all child elements of .postedIn-element to prevent a line-break within a white-space.

.postedIn > * { white-space: nowrap; } will solve the issue already without further changes such as adding flexbox.

.postedIn {
  width: 100%;
}

.postedIn > * {
  white-space: nowrap;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-10 mx-auto p-md-5 fullPost mb-5">
  <div class="row mt-5 pt-5" id="postCategoryTagContainer" style="width: 280px">
    <div class="col-8 mt-3 postedIn">
        <span id="postedIn">Posted in:</span>&nbsp;<?php the_category('&nbsp;') ?>
        &nbsp;<a href="http://localhost/wordpress/archives/category/test-1" rel="category    tag">Test 1</a>
        &nbsp;<a href="http://localhost/wordpress/archives/category/test-2" rel="category tag">Test 2</a>
        &nbsp;<a href="http://localhost/wordpress/archives/category/test-4" rel="category tag">Test 4</a>
        &nbsp;<a href="http://localhost/wordpress/archives/category/test-5" rel="category tag">Test 5</a>
        &nbsp;<a href="http://localhost/wordpress/archives/category/test3" rel="category tag">Test 3</a>
        &nbsp;<a href="http://localhost/wordpress/archives/category/uncategorized" rel="category tag">Uncategorized</a>    
    </div>
  </div>
</div>

Answered By - tacoshy