微信小程序界面设计入门课程-样式wxss中使用css课程-文本-text-indent缩进文本_黄菊华老师的博客-程序员信息网

技术标签：微信小程序css教程微信小程序界面设计入门在线视频教程微信小程序-样式-wxss-css 样式wxss中使用css课程-文本-text-indent缩进文本微信小程序wxss入门视频教程

微信小程序交流群：111733917 | 微信小程序从0基础到就业的课程：https://edu.csdn.net/topic/huangjuhua

text-indent缩进文本
语法
把 Web 页面上的段落的第一行缩进，这是一种最常用的文本格式化效果。
CSS 提供了 text-indent 属性，该属性可以方便地实现文本缩进。
通过使用 text-indent 属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值。
这个属性最常见的用途是将段落的首行缩进，下面的规则会使所有段落的首行缩进 5 em：

p {text-indent: 5em;}

注意：一般来说，可以为所有块级元素应用 text-indent，但无法将该属性应用于行内元素，图像之类的替换元素上也无法应用 text-indent 属性。不过，如果一个块级元素（比如段落）的首行中有一个图像，它会随该行的其余文本移动。
提示：如果想把一个行内元素的第一行“缩进”，可以用左内边距或外边距创造这种效果。
使用负值
text-indent 还可以设置为负值。利用这种技术，可以实现很多有趣的效果，比如“悬挂缩进”，即第一行悬挂在元素中余下部分的左边：

p {text-indent: -5em;}

不过在为 text-indent 设置负值时要当心，如果对一个段落设置了负值，那么首行的某些文本可能会超出浏览器窗口的左边界。为了避免出现这种显示问题，建议针对负缩进再设置一个外边距或一些内边距：

p {text-indent: -5em; padding-left: 5em;}

使用百分比值
text-indent 可以使用所有长度单位，包括百分比值。
百分数要相对于缩进元素父元素的宽度。换句话说，如果将缩进值设置为 20%，所影响元素的第一行会缩进其父元素宽度的 20%。
在下例中，缩进值是父元素的 20%，即 100 个像素：

div {width: 500px;}
p {text-indent: 20%;}

<div>
<p>this is a paragragh</p>
</div>

继承
text-indent 属性可以继承，请考虑如下标记：

div#outer {width: 500px;}
div#inner {text-indent: 10%;}
p {width: 200px;}

<div id="outer">
<div id="inner">some text. some text. some text.
<p>this is a paragragh.</p>
</div>
</div>

以上标记中的段落也会缩进 50 像素，这是因为这个段落继承了 id 为 inner 的 div 元素的缩进值。

小程序应用

Wxml代码

<view class='cls1'>
  文本内容（块级元素支持缩进）
</view>
<view >
  <text class='cls2'>文本内容(行内元素不支持缩进)</text>
</view>
<view class='cls3'>
  <text>文本内容（文本缩进）</text>
</view>

Wxss代码

/*缩进文本*/
.cls1{
  text-indent: 2em 
}
.cls2{
  text-indent: 2em;
  /*可以为所有块级元素应用 text-indent，但无法将该属性应用于行内元素*/
}
.cls3{
  text-indent: 2em;
}

效果下图
微信小程序界面设计入门课程-样式wxss中使用css课程-文本-text-indent缩进文本

欢迎大家收看我的视频教程：微信小程序样式入门到精通(wxss,css)（微信小程序界面设计必备技能）
微信小程序界面设计入门课程-样式wxss中使用css课程-文本-text-indent缩进文本

本文链接：https://blog.csdn.net/u013818205/article/details/86475701

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

WPF中DataGrid设置列头样式_夜读春秋的博客-程序员信息网

Boss 一声令下，来吧，略Geek的黑色风格太阴暗，界面风格给我改得阳光点。接下来各种调整。记一下设置DataGrid列头样式的方法。<DataGrid ...>... <DataGrid.ColumnHeaderStyel> <Style TargetType="{x:Type DataGridColumnHeader}"> <Set

浅谈滴滴派单算法_傲娇的koala的博客-程序员信息网

桔妹导读：说到滴滴的派单算法，大家可能感觉到既神秘又好奇，从出租车扬召到司机在滴滴平台抢单最后到平台派单，大家今天的出行体验已经发生了翻天覆地的变化，面对着每天数千万的呼...

CSS实现自定义导航栏带二级菜单_自适应导航二级菜单_缘如风的博客-程序员信息网

代码如下：&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;&lt;html&gt;&lt;head&gt;&lt;meta http-equiv="Content-Type" content="text

vue-cli3.0+vant出现的问题总结_mschange的博客-程序员信息网

1、轮播图在ios9以下都不能滑动解决办法：https://github.com/surmon-china/vue-awesome-swipernpm install vue-awesome-swiper --save全局引入import Vue from 'vue'import VueAwesomeSwiper from 'vue-awesome-swiper...

ffmpeg剪切合成视频_dinghua6449的博客-程序员信息网

1、截取：ffmpeg-i1.mp4-ss00:46:15-ccopy-t02:00:00out1.mp42、合并：ffmpeg-iout1.mp4-vcodeccopy-acodeccopy-vbsfh264_mp4toannexb1.tsffmpeg-iout2.mp4-vcodeccopy-acodeccopy-v...

MySQL的安装与配置——详细教程_mysql安装教程详细_C澒的博客-程序员信息网

Winton的博文

随便推点

【PyTorch】8 语言翻译Torchtext实战——英语和德语翻译、Attention模型、 Pytorch 1.8 安装_as of spacy v3.0, shortcuts like 'de' are deprecat_Yang SiCheng的博客-程序员信息网

torchtext 语言翻译1. 数据处理2. DataLoader3. 定义我们的nn.Module和Optimizer4. 训练这是官方文本篇的一个教程，原英文文档，中文文档和API文档本教程介绍了如何使用torchtext预处理包含英语和德语句子的著名数据集的数据，并使用它来训练序列到序列模型，并能将德语句子翻译成英语1. 数据处理torchtext具有工具，可用于创建可以轻松迭代的数据集，以创建语言翻译模型。在此示例中，我们展示了如何对原始文本句子进行标记，构建词汇表以及将标记数字化为张量