CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Iffat Fatima
Iffat Fatima

Reputation: 1748

text moving out of column in bootstrap

I want to keep the text to move to next line in order to keep it in its own column but my text is overflowing. I want all 1's to stay in 1st col. Any hints on what i might need to change/add?

Heres the code:

<div class="container-fluid ">
 <div class="row">
 <div class="col-sm-4"> Col1  1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</div>
  <div class="col-sm-4">Col2</div>
  <div class="col-sm-4">Col3</div>
</div>
</div>

Heres the link to how it looks:JSFiddle

Upvotes: 2

Views: 4724

Answers (3)

Ankanna
Ankanna

Reputation: 777

It is css bootstrap default overflow might be not hidden so the text flows use the class col-md-1 make the col-sm-1 to col-md-1

Here is the output

Upvotes: 0

Philip Feldmann
Philip Feldmann

Reputation: 8375

.col-sm-4 {
   -moz-hyphens:auto;
   -ms-hyphens:auto;
   -webkit-hyphens:auto;
   hyphens:auto;
   word-wrap:break-word;
}

This should do the job. Your problem was, that the browser can't decide where to put a break since you don't have a single space. With hyphens you force him to just break to the next line when there's not enough space. Check here for Browser Support: https://developer.mozilla.org/de/docs/Web/CSS/hyphens#Browser_compatibility

Upvotes: 2

Staafsak
Staafsak

Reputation: 500

I'm not sure if you want to use CSS "overflow", perhaps checkout this link which will tell you what it is:

http://www.w3schools.com/cssref/pr_pos_overflow.asp

PS: Checkout the Property Values section for the desired end result.

Upvotes: 0

Related Questions