html 只显示几个字符,HTML5----CSS显示半个字符

CSS显示半个字符的基本思路：

就是一个字写两遍，分别显示一半。这里就须要用到CSS伪元素:before和:after，记住这个“伪元素”的“伪”字，表明它本来是不存在的。我们的方法就是在伪元素里放置同样的字符，仅仅显示半个，而原字符显示另外一半，最后把它们拼成一个字。

效果图：

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;

}

HTML:

到

此

一

游