Bootstrap 4 - Responsive + Centred & Word Wrapped navbar-brand - html

Question

I have been trying to make a bootstrap 4 navbar that has a centered navbar-brand (text) with the emblem on the far left and links on the right I have managed to do this with it being almost correct however I have a large brand name therefore I need it to text wrap when I go below a certain width however instead of it text wrapping it pushes the other elements out of the way before wrapping how can I fix this?
Current code:
.embelem{
height:40px;
width:40px;
}
#media (min-width: 768px) {
.abs-center-x {
position: absolute;
left: 50%;
transform: translateX(-50%);
text-align:center;
}
#title {
padding: 13px
}
}
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar sticky-top navbar-expand-lg navbar-light bg-light">
<picture class="embelem">
<source srcset="https://lucas-testing.000webhostapp.com/images/embelem.webp" class="embelem" alt="Embelem" type="image/webp">
<source srcset="https://lucas-testing.000webhostapp.com/images/embelem.png" class="embelem" alt="Embelem" type="image/png">
<img src="https://lucas-testing.000webhostapp.com/images/embelem.webp" class="embelem" alt="Embelem" type="image/webp">
</picture>
<a id="title" class="sticky-top navbar-brand abs-center-x text-wrap" style="color: #818181;" href="./">The City of Truro Mariners</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="./index">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./members page">Members page</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./contact us">Contact us</a>
</li>
<li class="nav-item dropdown" style="cursor:pointer">
<a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Extra's</a>
<div id="dropdownSlider" class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="./release/index">App Download</a>
<a class="dropdown-item" href="./links">Links</a>
<a class="dropdown-item" href="./dates for the diary">Dates for the diary</a>
</div>
</li>
</ul>
</div>
</nav>

Answer 1

Applying these styles will wrap the text without truncating it:
#media (max-width: 768px){
.navbar-brand{
flex: 1 0 100px;
text-align: center;
}
}
.embelem{
height:40px;
width:40px;
}
#media (max-width: 768px){
.navbar-brand{
flex: 1 0 100px;
text-align: center;
}
}
#media (min-width: 768px) {
.abs-center-x {
position: absolute;
left: 50%;
transform: translateX(-50%);
text-align:center;
}
#title {
padding: 13px
}
}
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar sticky-top navbar-expand-lg navbar-light bg-light">
<picture class="embelem">
<source srcset="https://lucas-testing.000webhostapp.com/images/embelem.webp" class="embelem" alt="Embelem" type="image/webp">
<source srcset="https://lucas-testing.000webhostapp.com/images/embelem.png" class="embelem" alt="Embelem" type="image/png">
<img src="https://lucas-testing.000webhostapp.com/images/embelem.webp" class="embelem" alt="Embelem" type="image/webp">
</picture>
<a id="title" class="sticky-top navbar-brand abs-center-x text-wrap" style="color: #818181;" href="./">The City of Truro Mariners</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="./index">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./members page">Members page</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./contact us">Contact us</a>
</li>
<li class="nav-item dropdown" style="cursor:pointer">
<a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Extra's</a>
<div id="dropdownSlider" class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="./release/index">App Download</a>
<a class="dropdown-item" href="./links">Links</a>
<a class="dropdown-item" href="./dates for the diary">Dates for the diary</a>
</div>
</li>
</ul>
</div>
</nav>

Answer 2

replace you navbar-brand css to this code below. and remove .text-wrap class to make it work
.embelem{
height:40px;
width:40px;
}
.navbar-brand {
padding-top: .3125rem;
padding-bottom: .3125rem;
margin-right: 1rem;
font-size: 1.25rem;
line-height: inherit;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap !important;
display: block;
width: 50%;
min-width: 1px;
}
#media (min-width: 768px) {
.abs-center-x {
position: absolute;
left: 50%;
transform: translateX(-50%);
text-align:center;
}
#title {
padding: 13px
}
}
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar sticky-top navbar-expand-lg navbar-light bg-light">
<picture class="embelem">
<source srcset="https://lucas-testing.000webhostapp.com/images/embelem.webp" class="embelem" alt="Embelem" type="image/webp">
<source srcset="https://lucas-testing.000webhostapp.com/images/embelem.png" class="embelem" alt="Embelem" type="image/png">
<img src="https://lucas-testing.000webhostapp.com/images/embelem.webp" class="embelem" alt="Embelem" type="image/webp">
</picture>
<a id="title" class="sticky-top navbar-brand abs-center-x" style="color: #818181;" href="./">The City of Truro Mariners</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="./index">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./members page">Members page</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./contact us">Contact us</a>
</li>
<li class="nav-item dropdown" style="cursor:pointer">
<a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Extra's</a>
<div id="dropdownSlider" class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="./release/index">App Download</a>
<a class="dropdown-item" href="./links">Links</a>
<a class="dropdown-item" href="./dates for the diary">Dates for the diary</a>
</div>
</li>
</ul>
</div>
</nav>