Responsive CSS, abbreviated content I wonder if there is a "correct" way to display different content, based on the the state of responsive webdesign. Different in this case is meant as an abbreviated text to display instead of the full one.

I have created this example table with a couple columns, containing either the full name of a state, or, when resized to a smaller screensize, it's 2-letter code.

HTML:



&lt;!doctype html&gt;
&lt;meta name="viewport" content="width=device-width"/&gt;
&lt;body&gt;
&lt;table&gt;
&lt;tr&gt;
    &lt;th&gt;&lt;span class="full"&gt;California&lt;/span&gt;&lt;span class="abbr"&gt;CA&lt;/span&gt;&lt;/th&gt;
    &lt;th&gt;&lt;span class="full"&gt;Florida&lt;/span&gt;&lt;span class="abbr"&gt;FL&lt;/span&gt;&lt;/th&gt;
    &lt;th&gt;&lt;span class="full"&gt;Texas&lt;/span&gt;&lt;span class="abbr"&gt;TX&lt;/span&gt;&lt;/th&gt;
    &lt;th&gt;&lt;span class="full"&gt;Georgia&lt;/span&gt;&lt;span class="abbr"&gt;GA&lt;/span&gt;&lt;/th&gt;
&lt;/tr&gt;
&lt;tr&gt;
    &lt;td&gt;Sacramento&lt;/td&gt;
    &lt;td&gt;Tallahassee&lt;/td&gt;
    &lt;td&gt;Austin&lt;/td&gt;
    &lt;td&gt;Atlanta&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
&lt;/body&gt;
&lt;/html&gt;


CSS:



th {
    border: 1px solid #000;
}

td {
    border: 1px solid #000;
}

@media screen and (max-width:760px){
.full {
    display: inline;
    }
.abbr {
    display: none;
}
}

@media screen and (max-width:320px){
.full {
    display: none;
    }
.abbr {
    display: inline;
}
}


jsFiddle

It works as I want, but this solution kind of seems more like a hack to me to get it working.

I've googled, but haven't found anything regarding the topic, which might just be the result of not knowing what exactly to ask. Anyhow, I somehow got the feeling, that there's a more sophisticated way of doing such a thing.
To expand on Hubert Grzeskowiak's answer the custom data attribute is a good option for you as you can continue specifying content in the markup as it should.

But there is a way with CSS to display it with the content property. Used on a pseudo element, you can choose to show it or not depending on viewport width with media queries.

This will allow you to :


minimize markup
change the content according to the viewport width
no use of JS
keep the content in the markup


DEMO



th {
    border: 1px solid #000;
    position:relative;
}
td {
    border: 1px solid #000;
}
.full:after{
    content: attr(data-state);
    display:none;
}
@media screen and (max-width:320px) {
    .full:after{
        position:absolute;
        top:0;left:0;
        width:100%; height:100%;
        background:#fff;
        display:block;
}
&lt;table&gt;
    &lt;tr&gt;
        &lt;th class="full" data-state="CA"&gt;California&lt;/th&gt;
        &lt;th class="full" data-state="FL"&gt;Florida&lt;/th&gt;
        &lt;th class="full" data-state="TX"&gt;Texas&lt;/th&gt;
        &lt;th class="full" data-state="GA"&gt;Georgia&lt;/th&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td&gt;Sacramento&lt;/td&gt;
        &lt;td&gt;Tallahassee&lt;/td&gt;
        &lt;td&gt;Austin&lt;/td&gt;
        &lt;td&gt;Atlanta&lt;/td&gt;
    &lt;/tr&gt;
&lt;/table&gt;