Как сделать так, чтобы текст динамически разрывался или переходил на следующую строку?

Question

У меня есть такой дизайн:

Вы видите средний текст, когда он слишком большой, он портит мой дизайн. здесь вы можете увидеть

Я хочу, чтобы после определенных символов он был go вниз от места, где началось и продолжалось. Я нуб. Пожалуйста, помогите мне.

Мой 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

Обновите CSS, чтобы иметь свойство max-width.

Исходя из того, что у вас есть, вы можете добавить этот блок кода в файл CSS:

.office-location {
    display: block;
    // set this value to something that makes sense for your design.
    max-width: 100px;
}