Twitter Bootstrap Question posted in

Twitter bootstrap – Why does the content overflow the column?

I am trying out bootstrap columns, so I have a column which occupies 8 parts of the row, And the second part occupies the 4 parts. But the 8 parts div has more content, and it is overflowing. how to stop that behaviour.

.bggreen {
  background: green;
}
.bgred {
  background: red;
}
.border {
  border: 1px solid black;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-md-8 bggreen border">This is not normal column. This is supposed to be a bigger column which occupies 8 parts of the row, while the next div occupies only 4 parts ................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................
    </div>
    <div class="col-md-4 bgred border">This is ver small</div>
  </div>
</div>
Tags:

3

Answers


  1. 0

    It is the default behaviour since the dots do not have a breaking character and is treated as a single word. You can use word-wrap: break-word for creating a new line after the parts text or word-break: break-all to continue the dots with the text.

    .bggreen {
  background: green;
}
.bgred {
  background: red;
}
.border {
  border: 1px solid black;
}
.col-md-8.bggreen.border {
  word-wrap: break-word;
}
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-md-8 bggreen border">This is not normal column. This is supposed to be a bigger column which occupies 8 parts of the row, while the next div occupies only 4 parts ................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................
    </div>
    <div class="col-md-4 bgred border">This is ver small</div>
  </div>
</div>
    .bggreen {
  background: green;
}
.bgred {
  background: red;
}
.border {
  border: 1px solid black;
}
.col-md-8.bggreen.border {
  word-break: break-all;
}
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-md-8 bggreen border">This is not normal column. This is supposed to be a bigger column which occupies 8 parts of the row, while the next div occupies only 4 parts ................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................
    </div>
    <div class="col-md-4 bgred border">This is ver small</div>
  </div>
</div>
    Login or Signup to reply.
  2. 0

    Define a class hideOverflow with overflow hidden and then text-overflow property to ellipsis. That will do the trick.

    .hideOverflow {
    overflow: hidden;
    -ms-text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    display: block;
}
.bggreen {
  background: green;
}
.bgred {
  background: red;
}
.border {
  border: 1px solid black;
}
.col-md-8.bggreen.border {
  word-break: break-all;
}
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-md-8 bggreen border hideOverflow">This is not normal column. This is supposed to be a bigger column which occupies 8 parts of the row, while the next div occupies only 4 parts ................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................
    </div>
    <div class="col-md-4 bgred border">This is ver small</div>
  </div>
</div>
    Login or Signup to reply.
  3. 0

    Word-wrap property breaks the text and avoids the overflow. In your css file add the following style.

    .col-md-8.bggreen.border
{
   word-wrap:break-word;
}

    you can visit this website http://www.aubrett.com/InformationTechnology/WebDevelopment/CSS/FailSafeCSS1.aspx

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search