HTML5----CSS显示半个字符
2014-05-16 11:27
162 查看
CSS显示半个字符的基本思路:
就是一个字写两遍,分别显示一半。这里就需要用到CSS伪元素:before和:after,记住这个“伪元素”的“伪”字,表明它本来是不存在的。我们的方法就是在伪元素里放置相同的字符,只显示半个,而原字符显示另外一半,最后把它们拼成一个字。
效果图:
CSS:
HTML:
就是一个字写两遍,分别显示一半。这里就需要用到CSS伪元素:before和:after,记住这个“伪元素”的“伪”字,表明它本来是不存在的。我们的方法就是在伪元素里放置相同的字符,只显示半个,而原字符显示另外一半,最后把它们拼成一个字。
效果图:
CSS:
<style type="text/css"> .halfStyle { position:relative; display:inline-block; font-size:100px; /* 任何宽度都可以 */ color: black; /* 任何颜色,或透明 */ overflow:hidden; white-space: pre; /* 处理空格 */ font-family:Microsoft YaHei; font-weight:bold; } .halfStyle:before { display:block; z-index:1; position:absolute; top:0; left:0; width: 50%; content: attr(data-content); /* 伪元素的动态获取内容 */ overflow:hidden; color: #f00; } </style>
HTML:
<span class="halfStyle" data-content="到">到</span> <span class="halfStyle" data-content="此">此</span> <span class="halfStyle" data-content="一">一</span> <span class="halfStyle" data-content="游">游</span>
相关文章推荐
- HTML5----CSS显示半个字符
- CSS(js)限制页面显示的文本字符长度
- CSS强制文本在一行内显示若有多余字符则使用省略号表示
- css多余字符显示省略号
- CSS(js)限制页面显示的文本字符长度
- html5标签用css限制显示行数(字数)
- 用CSS来控制字符长度和显示长度
- css控制字符长度超出变成点点点显示(单行,多行)
- CSS强制文本在一行内显示若有多余字符则使用省略号表示
- 用CSS美化半个字符巧妙方法
- CSS自动截断表格内的长字符 以省略号显示
- CSS美化半个字符的巧妙方法
- CSS截取字符串多余字符并以省略号显示
- 使用JS和CSS限制页面显示的字符长度
- 用CSS来控制字符长度和显示长度
- 用CSS来控制字符长度和显示长度
- CSS/JS 限制显示字符的数量
- 【CSS】文字超出显示省略号&连续字符换行
- CSS强制文本在一行内显示若有多余字符则使用省略号表示
- css设置段落文字首行缩进2字符,文字靠左侧显示,文字间距0.5像素