CSS属性（2）——text-indent 属性

来源：互联网发布：js 递归函数编辑：程序博客网时间：2024/04/29 08:37

text-indent 属性规定文本块中首行文本的缩进，也允许使用负值。如果使用负值，那么首行会被缩进到左边。

示例：

<p>北京时间8月7日，美媒CheatSheet分析了骑士新赛季卫冕冠军的难度，认为他们有三大优势护体，完全配得上夺冠大热的称号。骑士上赛季打破了克利夫兰52年的冠军荒，如今外界所关注的便是他们能否卫冕冠军。勒布朗-詹姆斯、凯里-欧文和凯文-乐福的三巨头还在，但由于联盟其他球队实力的暴涨，他们卫冕的难度显然十分之大。</p>p {text-indent: 60px}

展示的效果：

另外使用text-indent 属性可以实现一些点击文字让文字动起来的效果。

例如：

<body><h2>是否继续下载？</h2>        <a class="yes mode">是</a>        <a class="yes">否</a></body>

.yes{width: 50px;height: 50px;border: 3px solid #ccc;border-radius: 25%;text-align: center;line-height: 50px;background-color: darkseagreen;cursor: pointer;float: left;margin-left: 10px;}.mode {    writing-mode: tb-rl;    -webkit-writing-mode: vertical-rl;          writing-mode: vertical-rl;    *writing-mode: tb-rl;    }         .yes:active {    text-indent: 6px;}

实现的效果如下：

鼠标点击“是”，可以看到文字向下运动了6px，点击“否”，可以看到文字向右运动了6px。

.mode 设置了文字的排版格式，默认是左右移动的，使用.mode强制文字上下排版，所以点击是向下运动的。

0 0