I am building an event calendar for a web site, and I would like to present it such that *if the viewport is resized to be smaller, the day titles become standard abbreviations.* That is, ‘Sunday’ would become ‘Sun’, then just ‘S’ if the viewport were reduced further.

One way I have thought to approach it is to define the names and abbreviations as classes, as follows.

```
<div class="day">
    <div class="full">Sunday</div>
    <div class="abbr">Sun</div>
    <div class="init">S</div>
</div>

```

Then those elements could have fixed widths, like this.

```
.day .full
{
    width: 100px;
}

.day .abbr
{
    width: 50px;
}

```

However, I do not know whether this approach can work, as I can not think of how the elements might be wrapped out of view in the container, *nor how they might remain centred in the container*.

Has anyone worked with an effect like this without employing Javascript? It strikes me that the mechanics of CSS should probably be able to do it, but I can not see how.

Thank you in advance.