Boostrap: Text overflows out of div

Question

I have the following mark up which works fine when I view the page in full screen

, but when I decrease the width of the browser, it spills out of the div.

I've used white-space: normal on panel-body but it doesn't work. text-overflow: ellipsis doesn't do anything either. I'm using Bootstrap.

<div class="col-sm-4">
    <section class="panel" style="background:#e74c3c; color:#FFF;">
        <div class="panel-body">
            COMPLAINT<br>
            8
        </div>
    </section>
</div>

.col-sm-4 {
    width: 33.33333333333333%;
}

.panel-body {
    padding: 15px;
}

.panel {
    margin-bottom: 15px;
    background-color: #ffffff;
    border: 1px solid transparent;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.05);
    box-shadow: 0 1px 1px rgba(0,0,0,0.05);
}

Answer 1

For text-overflow: ellipsis to work you have to add a overflow: hidden setting to that element.

jsFiddle Demo

.panel-body {
    text-overflow: ellipsis;
    overflow: hidden;
}

Answer 2

You need to either put word-wrap: break-word; on .panel-body, however this may make the text very hard to read. Alternatively you could put a min-width on the container of .col-sm-4 to prevent it becoming too small to fit the text in.