How to make text dynamically break or going to next line? - html

Question

I have a design like this:
You see the middle text,when it's too big it spoils my design.
here you can see
I want after a certain characters it will go down from where location started and continue.I am a noob. Please Help me.
My HTML:
<div class="title-body">
<h4 id="title"></h4>
<div class="info">
<span class="company"><i data-feather="briefcase"></i><span id="company_name"></span></span>
<span class="office-location"><a href="#"><i data-feather="map-pin"></i><span id="company_location"
style="word-break: break-all;width:14px;"></span></a></span>
<span class="job-type full-time"><a href="#"><i data-feather="clock"></i><span
id="employment_status"></span></a></span>
</div>
</div>
CSS
element.style {
word-break: break-all;
width: 14px;
}
.job-title-and-info .title .title-body .info span {
font-size: 1.4rem;
font-weight: 400;
font-family: "Roboto", sans-serif;
margin-right: 15px;
color: #6f7484;

Answer 1

Update your CSS to have a max-width property.
Based off what you have, you could add this block of code to your CSS file:
.office-location {
display: block;
// set this value to something that makes sense for your design.
max-width: 100px;
}