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

user_5502369 0
Viewed 384

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?

bootstrap-4 css html
2 Answers

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

user_33645810

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.

user_39270090
Related