Don't Wrap Span Elements

Don’t wrap span elements

You can use inline-block on .card in stead of float, and then disable wrapping with nowrap:

For .card:

display:inline-block;

For .cards:

white-space:nowrap;

http://jsfiddle.net/33kj4/1/

Prevent line-break of span element

Put this in your CSS:

white-space:nowrap;

Get more information here: http://www.w3.org/wiki/CSS/Properties/white-space

white-space

The white-space property declares how white space inside the element is handled.

Values

normal
This value directs user agents to collapse sequences of white space, and break lines as necessary to fill line boxes.

pre
This value prevents user agents from collapsing sequences of white space. Lines are only broken at newlines in the source, or at occurrences of "\A" in generated content.

nowrap
This value collapses white space as for 'normal', but suppresses line breaks within text.

pre-wrap
This value prevents user agents from collapsing sequences of white space. Lines are broken at newlines in the source, at occurrences of "\A" in generated content, and as necessary to fill line boxes.

pre-line
This value directs user agents to collapse sequences of white space. Lines are broken at newlines in the source, at occurrences of "\A" in generated content, and as necessary to fill line boxes.

inherit
Takes the same specified value as the property for the element's parent.

Prevent span elements from wrapping

span elements are, by default, inline elements. In an inline formatting context boxes can wrap. (This is what happens to text when it wraps around a floated image.)

div elements are, by default, block elements. In a block formatting context the boxes will occupy all available horizontal space (width: 100%).

This is why your spans and divs aren't working as you want.

If you switch from display: inline to display: inline-block, you'll get block-level like behavior, which will prevent wrapping line boxes, but elements will stack horizontally with other inline elements.

W3C References:

9.2.2 Inline-level elements and inline boxes
9.2.1 Block-level elements and block boxes

How can I force a `span` to not wrap at the end of a line?

Try

span
{
  white-space: pre;
}

or any other value that fits from the w3c spec:

normal
This value directs user agents to collapse sequences of white space, and break lines as necessary to fill line boxes.

pre
This value prevents user agents from collapsing sequences of white space. Lines are only broken at preserved newline characters.

nowrap
This value collapses white space as for 'normal', but suppresses line breaks within text.

pre-wrap
This value prevents user agents from collapsing sequences of white space. Lines are broken at preserved newline characters, and as necessary to fill line boxes.

pre-line
This value directs user agents to collapse sequences of white space. Lines are broken at preserved newline characters, and as necessary to fill line boxes.

You should also be aware that there is limited IE support for some of the listed options.

WARNING, Cross-browser content messiness: You could replace all spaces in the line with

Prevent wrapping of span or div

Try this:

.slideContainer {    overflow-x: scroll;    white-space: nowrap;}.slide {    display: inline-block;    width: 600px;    white-space: normal;}

<div class="slideContainer">    <span class="slide">Some content</span>    <span class="slide">More content. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>    <span class="slide">Even more content!</span></div>

Wrap entire span on new line if doesn't fit

The <span> tag is inline by default, so the text inside will break when wrapping happens. You can set it to display: inline-block so that it renders as a whole block also remains inline level. Note, wrapping may still happen but only if the text length exceeds the parent container.

.post-short-meta-container span {
  ...
  display: inline-block;
}

display: inline-block The element generates a block element box that will be flowed with surrounding content as if it were a single inline box (behaving much like a replaced element would) - MDN

And for the layout you're trying to achieve, you can wrap the text "Read more" into a <a> tag, and set the button link style on it instead of the table cell, see the updated demo below.

jsFiddle

.post-short-footer {  display: table;  width: 100%;}.read-more-post {  height: 100%;  display: table-cell;  vertical-align: middle;  width: 20%;  text-align: center;}.read-more-post a {  white-space: nowrap;  border: 1px solid #3b9be5;  padding: 0.6em 0.6em;  border-radius: 0.3em;  display: block;}.post-short-meta-container {  display: table-cell;  padding-left: 1em;  width: 80%;  line-height: 100%;  vertical-align: middle;  height: 100%;}.post-short-meta-container span {  display: inline-block;  padding: 0.3em;  margin: 0.3em;  border: 1px dotted red;}

<div class="post-short-footer">  <div class="read-more-post">    <a href="#">Read more</a>  </div>  <div class="post-short-meta-container">    <span>Some text here</span>    <span>Some text here</span>    <span>Some text here</span>    <span>Some text here</span>    <span>Some text here</span>  </div></div>

CSS span not wrapping fully

Try setting your spans to display: inline-block.

http://jsfiddle.net/QHWNF/10/

Span inside div does not wrap

use word-wrap:break-word; in CSS but if you don't like it, use #code{overflow:auto;}.

On you page you have multiple IDs code which is not good. Try to use unique IDs.

Don't Wrap Span Elements