CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
user1038814
user1038814

Reputation: 9677

Boostrap: Text overflows out of div

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

enter image description here

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

enter image description here

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);
}

Upvotes: 7

Views: 9907

Answers (4)

Promise Preston
Promise Preston

Reputation: 29098

I had this issue when working on a Rails 6 application with Bootstrap:

I simply defined a custom CSS class:

.remove_overflow {
  overflow: hidden;
}

and applied the custom CSS class to the form element:

<div class="form-group">
  <%= form.label :body %>
  <%= form.rich_text_area :body, class: 'form-control hide_overflow' %>
</div>

That's all.

I hope this helps

Upvotes: 0

Ayyappan K
Ayyappan K

Reputation: 1186

If your using word-break break-all means word will cut off so you can give proper width in percentage value then also problem means use text-overflow:ellipsis.

Example:

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

Upvotes: 0

Itay
Itay

Reputation: 16785

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

jsFiddle Demo

enter image description here

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

Upvotes: 6

Rory McCrossan
Rory McCrossan

Reputation: 337713

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.

Upvotes: 2

Related Questions