Bootstrap panel header text clipping out

Question

I made two columns with panels in which hold responsive images. The panels have headers with links to those images. When resizing the viewport horizontally, the links clip out of the header.

Answer 1

This is the default behavior in CSS, but can change it by setting the overflow-wrap and the word-wrap properties.

.word-wrap-fix {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

Here is a working example where there are two panels with a very long title and in one the .word-wrap-fix is applied.

This link covers it pretty well and provides a few examples.