Text overflowing from div

Question

I have the following caption that works great when viewing a page in full screen

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

I used white-space: normal on the panel, but this does not work. text-overflow: ellipsis does nothing either. I am 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 need to add the overflow: hidden parameter to this element.

jsFiddle Demo

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

Answer 2

You need to either put word-wrap: break-word; on .panel-body , but this can make the text very difficult to read. Alternatively, you can put min-width in a .col-sm-4 container so that it does not get too small to insert text.

Answer 3

If you use the word break-all, the word word will be disabled, so you can give the corresponding width as a percentage, and also the problem means using text overflow: ellipsis.

Example:

 .col-sm-4 { width: 30%; display: inline-block; text-align:center; overflow:hidden; text-overflow:ellipsis; }