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

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"><a href="#"><i data-feather="briefcase"></i><span id="company_name"></span></a></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;
}