在CSS媒体查询中缩写h1文本

时间:2013-06-03 23:30:19

标签: css css3 media-queries

我有一个<h1>元素,其中包含“WHERE LIONS ROAM”(我的网站名称,您可以在此处查看:http://www.wherelionsroam.co.uk)。对于移动设备尺寸的设备,如何将文本缩短为“WLR”。我有一个类似的预先存在的媒体查询(我试过玩它但我似乎无法得到它):

    <style>
    @media screen and (max-width: 650px) {
    #wlr {
    display:none;
}
    #wlr:after {
    content: 'WLR';
}
    } /* end of media query block */
    </style>

1 个答案:

答案 0 :(得分:1)

尝试使用:before和width

h1 {width:0;height:1em;overflow:hidden;padding-right:2.5em}
h1:before {content:'WLR';padding:0 2px;}