CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
Miomir Dancevic
Miomir Dancevic

Reputation: 6852

Not allow element to break bootstrap 3

I have something like this

   <div class="col-md-12">
            <span class="name">Lorem ipsum dolor sit amet SIDE 1</span>
            <span class="name">Lorem ipsum dolor sit amet SIDE 2</span>
            <span class="name">Lorem ipsum dolor sit amet SIDE 3</span>
            <span class="name">Lorem ipsum dolor sit amet SIDE 4</span>
   </div>

All is nice on bigger screens, only i have problem in smaller screens, the word collapse in half in second row, please take a look at this fiddle

http://jsfiddle.net/DTcHh/2441/

When on bigger screens all is well allign, on smaller screens span text size sometimet in half and not so nice. I dont know how big span will it be, it has to have auto, only the nice order has to be, please take a look

Upvotes: 1

Views: 79

Answers (2)

jbutler483
jbutler483

Reputation: 24559

Preventing mid-word wrapping

Please see this LIVE DEMO

which uses the

text-wrap:none;

declaration. It means that words won't be split down the middle, but instead the whole word will wrap to the next line, improving readability and maintaining visual appearance.

@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
 .name {
  margin-right: 10px;
  background-color: red;
  text-wrap: none;
}
<div class="col-md-12">
  <span class="name">Lorem ipsum dolor sit amet SIDE 1</span>
  <span class="name">Lorem ipsum dolor sit amet SIDE 2</span>
  <span class="name">Lorem ipsum dolor sit amet SIDE 3</span>
  <span class="name">Lorem ipsum dolor sit amet SIDE 4</span>
</div>

Full Block wrapping

Please see this LIVE DEMO

To stop whole blocks from wrapping, I would add a 

display: inline-block

declaration. It means that the entire span will wrap (rather than by word) on resizing of the screen.

@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
 .name {
  margin-right: 10px;
  background-color: red;
  display: inline-block;
}
<div class="col-md-12">
  <span class="name">Lorem ipsum dolor sit amet SIDE 1</span>
  <span class="name">Lorem ipsum dolor sit amet SIDE 2</span>
  <span class="name">Lorem ipsum dolor sit amet SIDE 3</span>
  <span class="name">Lorem ipsum dolor sit amet SIDE 4</span>
</div>

Upvotes: 1

Eric MORAND
Eric MORAND

Reputation: 6786

You could set the .name elements as inline-block elements, to prevent them from wrapping.

.name {
    margin-right: 10px;
    background-color:red;
    display: inline-block;
}

See this fiddle.

Upvotes: 1

Related Questions