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

最新推荐文章于 2023-04-28 10:59:57 发布

-Sloth-

最新推荐文章于 2023-04-28 10:59:57 发布

阅读量4.7k

点赞数 2

分类专栏： Web前端

本文链接：https://blog.csdn.net/qq_29882585/article/details/52143916

版权

Web前端专栏收录该内容

14 篇文章 0 订阅

订阅专栏

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强制文字上下排版，所以点击是向下运动的。

-Sloth-

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
4
评论
CSS属性（2）——text-indent 属性

text-indent 属性规定文本块中首行文本的缩进，也允许使用负值。如果使用负值，那么首行会被缩进到左边。示例：北京时间8月7日，美媒CheatSheet分析了骑士新赛季卫冕冠军的难度，认为他们有三大优势护体，完全配得上夺冠大热的称号。骑士上赛季打破了克利夫兰52年的冠军荒，如今外界所关注的便是他们能否卫冕冠军。勒布朗-詹姆斯、凯里-欧文和凯文-乐福的三巨头还在，但由于联
复制链接

扫一扫