Text truncation used to be the sole domain of server side technology. Nowadays we can do text ellipsis/truncation with CSS alone. Let's consider how.

Consider this markup (you can view this example online at rwd.education/code/ch5/example_05-03/):

<p class="truncate">OK, listen up, I've figured out the key eternal happiness. All you need to do is eat lots of scones.</p>

But we actually want to truncate the text at 520px wide. So it looks like this:

Here is the CSS to make that happen:

.truncate {
  width: 520px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: no-wrap;
}

Whenever the width of the content exceeds the width defined (the width can just as happily be set as a percentage such as 100% if it's inside a flexible container) it will be truncated. The white-space: no-wrap property/value pair is used to ensure that the content doesn't wrap inside the surrounding element.

Hopefully you know the kind of thing I mean? Horizontal scrolling panels are common on the iTunes store and Apple TV for showing panels of related content (movies, albums, and so on). Where there is enough horizontal space, all the items are viewable. When space is limited (think mobile devices) the panel is scrollable from side to side.

The scrolling panels work particularly well on modern Android and iOS devices. If you have a modern iOS or Android device to hand, take a look at this next example on that, alongside a desktop browser like Safari or Chrome: http://rwd.education/code/ch5/example_05-02/.

I've created a scrolling panel of the top-grossing films of 2014. It looks something like this on an iPhone:

I'm actually cheating a little. The key to this technique is the white-space property, which has actually been around since CSS 2.1 (http://www.w3.org/TR/CSS2/text.html). However, I'm going to use it alongside the new Flexbox layout mechanism, so hopefully you'll indulge me regardless?

To get the basics of this technique working we just need a wrapper narrower than the sum of its contents and to set it's width to auto in the x axis. This way, it won't scroll if there is enough space but it will if there isn't.

.Scroll_Wrapper {
  width: 100%;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
}

.Item {
  display: inline-flex;
}

By using white-space: nowrap we are saying 'do not wrap these elements when you find white space'. Then to keep everything in a single line, we set all the first children of that container to display inline. We're using inline-flex here but it could just as easily be inline, inline-block, or inline-table.

To make things a little more aesthetically pleasing I'm going to hide the scroll bar where I can. Unfortunately these are browser specific so you will need to add these by hand (an Autoprefixer tool won't add them as they are proprietary properties). I'm also going to add touch style inertia scrolling for WebKit browsers (typically iOS devices). Now the updated .Scroll_Wrapper rule looks like this:

.Scroll_Wrapper {
  width: 100%;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  /*Give us inertia style scrolling on WebKit based touch devices*/
  -webkit-overflow-scrolling: touch;
  /*Remove the scrollbars in supporting versions of IE*/
  -ms-overflow-style: none;
}

/*Stops the scrollbar appearing in WebKit browsers*/
.Scroll_Wrapper::-webkit-scrollbar {
  display: none;
}

Where space is limited, we get a nice scrollable horizontal panel. Otherwise, the content just fits.

There are, however, a couple of caveats to this pattern. Firstly, at the time of writing, Firefox has no property that allows you to hide the scroll bars. Secondly, older Android devices can't perform horizontal scrolling (no, really). I therefore tend to qualify this pattern with the help of feature detection. We'll look at how that works next.