在Bootstrap中，如何让文本保留在父div中？

Question

我正在努力让与链接和段落相关联的文本留在它们的父div中。

我将外部边界设置为col-sm-8，但文本链接溢出，不确定我在这里做错了什么，但我当前使用的代码就在下面。FWIW，我已经尝试在链接和段落上将框大小设置为content-box，但没有成功：

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

有问题的页面是这样的，您可以在其中看到溢出col sm-8边界的文本：http://kenticocms.fourthdimensioninc.com/homey

这里我漏掉了什么？

Answer 1

使用CSS word-break属性可以防止文本溢出父级的边界。

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

Read more about word-break.

Answer 2

你可以试试overflow-wrap: break-word;，它会打断很长的单词，并将它们换行到下一行。示例：

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

注意：与换行相比，只有当整个单词不能不溢出地放在自己的行上时，溢出换行才会创建换行。

参考：https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap