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:<!doctype html><meta name=viewport content=width=device-width/><body><table><tr>    <th><span class=full>California</span><span class=abbr>CA</span></th>    <th><span class=full>Florida</span><span class=abbr>FL</span></th>    <th><span class=full>Texas</span><span class=abbr>TX</span></th>    <th><span class=full>Georgia</span><span class=abbr>GA</span></th></tr><tr>    <td>Sacramento</td>    <td>Tallahassee</td>    <td>Austin</td>    <td>Atlanta</td></tr></table></body></html>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;}}jsFiddleIt 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.
Responsive CSS, abbreviated content
html;css
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 markupchange the content according to the viewport widthno use of JSkeep the content in the markupDEMOth {    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;}<table>    <tr>        <th class=full data-state=CA>California</th>        <th class=full data-state=FL>Florida</th>        <th class=full data-state=TX>Texas</th>        <th class=full data-state=GA>Georgia</th>    </tr>    <tr>        <td>Sacramento</td>        <td>Tallahassee</td>        <td>Austin</td>        <td>Atlanta</td>    </tr></table>