CODEWITHSUNDEEP
htmlcssbootstrap-4
Avinash D'Souza
Avinash D'Souza

Reputation: 33

In Bootstrap, how do I make text stay within the parent div?

I'm struggling to get the text associated with a link and a paragraph to stay within their parent div.

I set the outer boundary as col-sm-8 but the text links are overflowing, not sure what I'm doing wrong here but the code I'm currently using is directly below. FWIW, I've tried setting box-sizing as content-box on both the link and the paragraph with no luck:

<div class="col-sm-8"><!-- Begin Box -->
<div class="box">
<div class="box-thumb" onclick="window.open('/generationetfs')" style="cursor:pointer; background-image:url('/horizons/media/cssImages/ca/homepagetools/podcast.jpg');">&nbsp;</div>
</div>

<h2 class="box-title"><a class="box-link" href="/generationetfs" target="_blank">Generation ETFs Podcastasasasasasasasaaaaaaaaaaaaaaaaaaaaaaaaaaaaas</a></h2>

<p>Welcome to Generation ETFs, a podcast series dedicated to the <strong>next generation of investingasaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</strong></p>
</div>
<!-- End Box -->

The page in question is this, where you see the text overflowing the col-sm-8 boundary: http://kenticocms.fourthdimensioninc.com/homey

What am I missing here?

Upvotes: 2

Views: 1335

Answers (2)

Sunil
Sunil

Reputation: 411

You can try overflow-wrap: break-word;, it breaks long words and wraps them onto the next line. Example:

.class-name {overflow-wrap: break-word;]

Note: In contrast to word-break, overflow-wrap will only create a break if an entire word cannot be placed on its own line without overflowing.

Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap

Upvotes: 1

nad
nad

Reputation: 1100

Use the CSS word-break property to keep the text from overflowing the parent's bounds.

.box-link {
    word-break: break-word;
}

Read more about word-break.

Upvotes: 0

Related Questions