CODEWITHSUNDEEP
htmlcssbootstrap-4
Karoly
Karoly

Reputation: 99

the text is out of the div

I have the following issue, if I minimize the browser width, the spans are out of the div:enter image description here

How can I change the line automatically (without using br)? Like: enter image description here

<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>[email protected]</span>
        </div>
      </div> 
      <div class="row">
        <div class="col d-flex justify-content-start flex-column">
          <span>[email protected]</span>
        </div>
      </div> 
    </div>
  </div>
</div>

Upvotes: 0

Views: 43

Answers (2)

CJD
CJD

Reputation: 28

Try using the CSS property on the span word-wrap: break-word;

Upvotes: 1

Fcmam5
Fcmam5

Reputation: 6832

Use word-break: break-all CSS property.

.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>[email protected]</span>
        </div>
      </div> 
    </div>
  </div>
</div>

Upvotes: 3

Related Questions