текст вне раздела

Question

У меня возникает следующая проблема: если я уменьшу ширину браузера, промежутки выходят за пределы div:

Как изменить строку автоматически (без использования br)?Как:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

<div class="row">
  <div class="bg-danger col-12 col-md-4 col-xl-3 p-5 mb-3">
    <div class="row">
      <div class="row">
        <div class="col d-flex justify-content-start flex-column">
          <span>pepasdasdsadaiadtoadsasdasssssssda23@gmail.com</span>
        </div>
      </div> 
      <div class="row">
        <div class="col d-flex justify-content-start flex-column">
          <span>pepasdasdsadaiadtoadsasdasssssssda23@gmail.com</span>
        </div>
      </div> 
    </div>
  </div>
</div>

Answer 1

Попробуйте использовать свойство CSS для диапазона word-wrap: break-word;

Answer 2

Использовать word-break: break-all свойство CSS.

.break-words {word-break: break-all}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

<div class="row">
  <div class="bg-danger col-12 col-md-4 col-xl-3 p-5 mb-3">
    <div class="row">
      <div class="row">
        <div class="col d-flex justify-content-start flex-column break-words">
          <span>pepasdasdsadaiadtoadsasdasssssssda23pepasdasdsadaiadtoadsasdasssssssda23@gmail.com</span>
        </div>
      </div> 
      <div class="row">
        <div class="col d-flex justify-content-start flex-column">
          <span>pepasdasdsadaiadtoadsasdasssssssda23@gmail.com</span>
        </div>
      </div> 
    </div>
  </div>
</div>