文本超出了div

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

使用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>

Answer 2

尝试在跨度word-wrap: break-word;上使用CSS属性