text-indent妙用

最新推荐文章于 2022-09-19 09:03:37 发布

meifeng88

最新推荐文章于 2022-09-19 09:03:37 发布

阅读量158

点赞数

分类专栏： vue学习之路文章标签： CSS text-indent 布局首行隐藏前端开发

本文链接：https://blog.youkuaiyun.com/qq_28719103/article/details/119696938

版权

vue学习之路专栏收录该内容

12 篇文章

订阅专栏

一般会采用把该段文字分成两个span进行布局展示，会比较废手；那么可不可以换个方式呢，我们都知道text-indent是让首行缩进，那么我们奇思妙想反过来搞岂不是和我们这个需求刚好匹配呢；

实现css：{

text-indent: -2em;
padding-left: 2em;

}

就能实现如上的需求了，yyds

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

meifeng88

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

text-indent 的特殊性？

liuhao9999的博客

03-23

395

（1）text-indent仅对第一行内联盒子内容有效。（2）非替换元素以外的display计算值为inline的内联元素设置text-indent值无效，如果计算值inline-block/inli ne-table则会生效。（3）<input>标签按钮text-indent值无效。（4）<button>标签按钮text-indent值有效。（5）text-indent的百分比值是相对于当前元素的“包含块”计算的，而不是当前元素。 ...

浏览器书签整理小妙招 Python学习

最新发布

过客的博客

01-15

298

你是否还在被浏览器中繁多的书签搞得心烦意乱呢？是否还在依靠文本编辑器去做那些既麻烦又耗时的工作呢？如果你的答案是肯定的，那么不妨来学习一下简单且易懂的Python语言吧。一旦你掌握了Python，你就会惊喜地发觉，原来工作可以变得如此轻松自在呢！

参与评论您还未登录，请先登录后发表或查看评论

text-indent html,css text-indent属性怎么用

weixin_36199904的博客

06-29

814

css text-indent属性用于规定文本块中首行文本的缩进；语法为text-indent : length | % 。该属性允许使用负值；如果使用负值，那么首行会被缩进到左边。css text-indent属性怎么用？text-indent 属性规定文本块中首行文本的缩进。语法：text-indent : length | % ;属性值：length：定义固定的缩进。默认值：0。%：定义基于...

text-indent实现文本缩进布局

乐子

11-02

259

今天的总结很简单，但对于初学者来说，特别是对于我这个初入前端门槛的开发者来说，就不是那么地简单了（这里指不容易想到）。好了，废话不多说，今天的总结就是一个对文本缩进的简单应用。如何做到标题与内容的分离呢？如下图：就是做这么一个简单的标题与内容的分离，看似简单，但对于我这个初生牛犊确实难以想到（text-indent可以有负值来设置）。这不，想了很长时间...

CSS属性 – text-indent(一般)

coolchaobing的博客

07-26

255

认识text-indent

vue引入富文本编辑器

weixin_41463944的博客

09-19

1099

vue引入富文本编辑器

【段落填充与格式化】indent的妙用：段落美化神器

[【段落填充与格式化】indent的妙用：段落美化神器](https://media.cheggcdn.com/study/ab1/ab15bc89-ab0f-44ad-ace4-7ed5b76d9b04/image) # 1. indent工具概述 indent是UNIX系统上的一个老牌代码格式化工具，它...

实用CSS 文字收集

10-30

#### 三、`text-indent`属性的妙用除了控制文字的大小写外，CSS还提供了一个非常有用的属性`text-indent`，用于设置文本首行的缩进量。这个属性可以用来实现一些有趣的效果，例如在页面上隐藏文字，仅作为辅助性...

vue功能-键盘

一入前端深似海

07-04

4292

继上篇数字键盘以后，这篇文章写一下键盘用法，同猿们拿好小本本! 1.封装的键盘组件 <template> <div class="vitualKeyboard"> <div class="search" :style="{top:topPx,right:rightPx}"> <input name="inputArea" ...

OC基础回顾（六）了解和使用Xcode

妙亦涵的博客

07-16

2114

1.了解IDE窗口（1）窗口布局一览窗口包括：工具栏，导航器面板，编辑器面板，调试器面板，检查器面板和库面板。可以按住Command键+一个数字键（从1到7）或点击导航器面板的顶端的图标来切换导航器面板的视图。在窗口的右上角有一组工具栏按钮（2）更改公司名称的方法新建Objective-C源文件时，Xcode会自动

前端vue小功能

Change!

01-18

2531

功能1：1分钟请求接口，实时返回数据 created() { window.setInterval(() => {//1分钟刷新接口，实时更新今日累计营业额 setTimeout(() => { this.getList();//接口方法 }, 0) }, 600000) }, 功能2：探索中~~~ ...

vue项目里的Simditor修改缩进为首行缩进

l4642247的专栏

10-29

1928

这是需要修改的地方：首先修改一些html标签，使其允许使用text-indent样式，代码在Formatter的_init方法里 - p: ['margin-left', 'text-align'], - h1: ['margin-left', 'text-align'], - h2: ['margin-left', 'text-align'], - ...

CSS3属性之text-indent文本缩进使用详解

u013084331的博客

03-22

9314

1、定义：text-indent 属性规定文本块中首行文本的缩进。 2、使用：将段落的第一行缩进2em： div{text-indent:2em;} 3、注意事项： 3-1、允许使用负值。如果使用负值，那么首行会被缩进到左边。 3-2、使用text-indent不生效的原因以及解决办法：原因:text-indent无法作用于行内元素解决办法：将行内元素变为块级元素：dis

慎用text-indent的负值

01-04

627

为了语义化，我们可能会利用图片替换文字的方式来给我们的站点增色，举个栗子：文字文字 p { text-indent: -2500px; // 小，在高分辨率宽屏下文字隐藏失败 //text-indent: -99999px; // 大，但可能存在性能问题，甚至被搜索引擎屏蔽

text-indent无效解决方案

weixin_34356310的博客

12-11

1156

text-indent是用来字符缩进的。 1.text-indent所在的元素是行内元素而非块级元素。比如用在span,a等行内元素上。解决方案：在行内元素加上display:block; 或者把目标元素放入<div>等块级元素，然后把text-indent样式应用到<div>等块级元素。 2.text-indent所在的元素未使用overflow属性。解决方案：在元素...

css中text-indent的一些总结~

weixin_38269675的博客

03-30

2502

text-indent 这个css属性一般是用来设置文本的缩进，一般而言text-indent是只用在块级元素上面的，而不用在内联元素上面，text-indent的数值可以是正也可以是负（em或者px），还可以设置%例如： 1.使得任何段落首行缩进两个字符大小 p{ text-indent:2em; } 2.使得段落首行向前移动2个字符大小 p{ text-indent:-2em; } 3.%的使...

css中indent是什么意思,css文本属性中的text-indent的解析

weixin_33558072的博客

08-04

3511

文字属性text-indent是设置文字首行缩进的，任何元素都可以让首行以给定的长度缩进，长度甚至可以是负数；但只对快元素生效!p{text-align:2em;}这条规则使任何段落的首行缩进2个字符大小。通常，text-indent可应用于任何块级元素，但不能应用于内联元素，也不能用于替换元素，如,但是，如果段落首行有一个图像，那么它将随文本一起移动。text-indent支持负的文本缩进，如p...

首行缩进怎么设置

lin123_00的博客

04-29

3748

本篇文章所说的内容是一个用HTML缩进段落第一行的代码，我们要知道缩进段落需要用到的属性是text-indent，下面我们就来看一看具体的内容。语法格式： text-indent :(缩进宽度） 1 p {text-indent:1em;} 代码示例1：缩进单个字符通过指定“text-indent：1em”缩进一个字符的段落的开头。 ...

text-indent属性详解：块级、行内、替换元素应用

"text-indent属性是CSS中用于控制文本首行缩进的重要样式，主要应用于块级元素、行内元素和替换元素。以下是对text-indent用法的详细解释： 1. text-indent应用于块级元素在HTML中，块级元素如`<p>`通常用于包含...