文章/答案/技术大牛

发布

社区首页 >问答首页 >CSS缩进第一行文本通过右侧边缘

问CSS缩进第一行文本通过右侧边缘
EN

Stack Overflow用户

提问于 2013-06-19 03:56:13

回答 3查看 516关注 0票数 1

可以使用text-indent属性将第一行文本缩进左下角的任何一侧。考虑一下这个例子：

h1 { text-indent: -200px; margin-left: 200px; }

<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vehicula molestie imperdiet.</h1>

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                            Mauris   vehicula   molestie
                            imperdiet.
|---------- 200px ----------+------ 100% - 200px ------|
|-------------------------->| left margin
|<--------------------------| negative text indent

有什么办法可以反过来这样做吗？

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris   vehicula   molestie
imperdiet.
|------ 100% - 200px ------+---------- 200px ----------|

我想要的是文本的第一行(也就是第一行)，以将200 to扩展到左侧边缘。也许有一个类似的CSS属性，可以将缩进应用于右侧边缘，或者应用于第二行和后一行文本。

这是一个jsFiddle

css

text-indent

html

回答 3

Stack Overflow用户

发布于 2013-06-19 03:59:19

文本缩进可能来自父母。用垫子。

http://jsfiddle.net/qsDST/

#wrapper {
    width: 300px;
    text-indent: -200px;
    padding-left:200px;
}
h1 {
    background: lime;
    display:inline;
}

票数 0

Stack Overflow用户

发布于 2013-06-19 04:18:47

这是你想要的吗

h1.other-way-round {
    margin-left: 0px;
    text-indent:0px
}

演示

第二方法

h1.other-way-round{
    text-indent:0;
    position:relative;
    width:100%;
    left:-200px;
   }

演示

票数 0

Stack Overflow用户

发布于 2013-06-19 04:59:45

正如我所理解的，您的预期结果如下：

Lorem ipsum dolor sit amet, consectetur 
adipiscing elit. 
Mauris vehicula 
molestie imperdiet.

最简单的方法可能是使用Javascript。您可以检测到第二行和过去的行，并在它们周围包装一个标签-右200 of。

为此，您可能需要使用jQuery或simmilar。

糟糕的是，不可能设置宽度/高度或填充到:first-line伪元素。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/17190554

复制

html段落首行缩进两字符_css设置首行缩进

css java https 网络安全

段落前面空两个字的距离，不要再使用空格了，用CSS实现段落首缩进两个字符。应该使用首行缩进text-indent。text-indent可以使得容器内首行缩进一定单位。比如中文段落一般每段前空两个汉字。

全栈程序员站长

2022/09/20

4.7K0

css line rgb text 浏览器

text-align 属性 , 可以设置文本对齐方式 , 为标签设置该 CSS 样式 , 标签内的内容就会使用相应的对齐方式 ;

韩曙亮

2023/03/30

1.8K0

【CSS】CSS 文本样式 ④ ( CSS 外观属性 | color 文本颜色 | text-align 文本对齐方式 | line-height 行间距设置 | 首行缩进设置 | 文本装饰设置 )

Simditor修改缩进为首行缩进

其他

Simditor中默认的文本缩进行为是使用margin-left样式来处理的，所以如果文本太长折行后也会被一起向后缩进。这样对于显示中文文档确实不太好，于是修改了一些Simditor代码来实现首行缩进功能。具体步骤如下：首先修改一些html标签，使其允许使用text-indent样式，代码在Formatter的_init方法里 - p: ['margin-left', 'text-align'], - h1: ['margin-left', 'text-align'], -

kongxx

2018/05/14

1.7K0

【说站】css首行缩进text-indent的实现

css

2、缩进值的大小应该为字体大小的两倍，想要缩进几个字符，就把缩进值改为字体大小的几倍。

很酷的站长

2022/11/24

7360

MarkDown空格缩进与首行缩进

markdown

一般来说，使用markdown编辑时我们手打空格缩进是不起效果的，因此我们需要通过使用HTML中的空格实体来帮助我们实现缩进效果。

可定

2020/04/20

18.4K0

[Office] 段落缩进，首行缩进和首字下沉

office

选中相应段落，然后点击段落设置设置首字下沉

轻舞飞扬SR

2021/02/24

2.2K0

通过CSS设置文本属性

html 网站

文本属性 color 设置文本颜色； div span{ color: red; } 浏览器显示 text-align 设置元素水平对齐方式； div{text-align: center;} 浏览器显示看上图 text-indent 设置首行文本的缩进； div{ text-align: left; text-indent:20px; } 缩进截图效果不明显，自己可以试一下，切记

全栈开发日记

2022/05/12

1K0

CSS自动换行后缩进

padding text 原理

设置 padding-left:25px; text-indent:-25px; 原理就是先在左边用padding空开，再用text-indext把第一行收回来

江一铭

2022/06/16

4.8K0

让人纠结的首行缩进

css

让人纠结的首行缩进中文没有缩进，真心不好看。具体原理见 http://neoear.com/2009/10/wordpress-indent/ 因为原作者的文章是09年写的，对增加wordpress按钮的第一种方法已经失效，而第二种方法要根据不同的对不同的主题要适当的改变一下。而且第一种方法对于离线编辑器没有作用。首行缩进具体有3种方法。一，方法1：对wordpress自带的编辑器增加按钮，因为我用的是CKEditor，这方法不实用。PASS 二，方法2：

qinyang

2018/06/05

1.2K0

ckeditor解决首行缩进问题

ckeditor text 编辑器

我们需要修改他的一些代码，然后让他变成上面的代码，这样在点击缩进的时候，就是首行缩进2个字符了，而不是全段落缩进。

华创信息技术

2022/05/28

1.9K0

Emlog博客正文CSS实现首行缩进的方法,理论所有网页通用

网站

根据我们中国人写文章的习惯，首行是需要缩进两个字的地方的，博主写文章时每次都自己敲空间挺麻烦的，所以在模板里添加该空格是很多人所希望的。莫小奈说一下如果实现博客文章首行缩进两个字的空格的方法。

陌涛

2019/03/01

7550

首行缩进导致文档编辑后，紧接着的文本不断被删除？

1、选择[文本] 2、点击[替换] 3、点击[查找内容] 4、点击[更多] 5、点击[特殊格式] 6、点击[手动换行符] 7、点击[替换为] 8、点击[特殊格式] 9、点击[段落标记] 10、点击[全部替换] 10、点击[是] 11、点击[确定] 12、点击[×]

裴来凡

2022/05/28

9450

CSS text-indent 文字缩进效果

text

这上面的第二个段落就是实现了缩进的效果。第三个段落实现的是水平居中的效果。第四个段落实现的是水平靠右，垂直居中的效果。

Devops海洋的渔夫

2019/06/02

1.2K0

MarkDown首行缩进两种方式

腾讯云开发者社区 markdown html

markdown语法支持html语法所以可以用这个，本人倾向这种方式，看起来比较干净。

可定

2020/04/20

1.7K0

python中的缩进快捷键_取消首行缩进快捷键

python https 网络安全

和其它程序设计语言（如 Java、C 语言）采用大括号“{}”分隔代码块不同，Python 采用代码缩进和冒号（ : ）来区分代码块之间的层次。

全栈程序员站长

2022/11/08

1.6K0

css控制文本超出省略（单行、两行、多行）

css

想要控制文本长度？想要文本超出隐藏？还想要不用JavaScript实现？让我们来用css试试吧~本文重点css控制文本超出省略。完成单行、两行、多行的效果注意点本文提到的方法都需要控制元素width的大小单行省略：overflow: hidden;text-overflow: ellipsis;white-space: nowrap;两行省略： word-break: break-all; text-overflow: ellipsis; display: -webkit-box; -webkit

肥晨

2023/04/04

2.3K0

CSS布局 -- 左侧定宽，右侧自适应

其他

　　左侧定宽，右侧自适应有很多种方法可以实现缩小窗口试试看？方案一：左边左浮动，右边加个margin-left 查看 demo <!DOCTYPE html PUBLIC "-//W3C/

书童小二

2018/09/03

1K0

CSS 文本超出2行就隐藏且显示省略号

html css

display:-webkit-box; //将对象作为弹性伸缩盒子模型显示。

天狐

2022/04/22

2.3K0

CSS行高(line-height)及文本垂直居中原理

面向对象编程

在CSS中，line-height 属性设置两段段文本之间的距离，也就是行高，如果我们把一段文本的line-height设置为父容器的高度就可以实现文本垂直居中了，比如下面的例子：

张张

2019/12/26

4.6K0

Python基础语法学习：行与缩进

python 其他

缩进是python的一大特色，很多其他语言爱好者在第一次接触python时，对此都会感到很不习惯。

python学习教程

2020/02/13

7430

相似问题

css文本-在右侧缩进等效项

CSS替代第一行文本-缩进？

CSS -缩进除第一行外的所有

通过CSS将标签的第二行缩进精确地低于第一行。

CSS文本结尾缩进

添加站长进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

问CSS缩进第一行文本通过右侧边缘
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

css文本-在右侧缩进等效项

CSS替代第一行文本-缩进？

CSS -缩进除第一行外的所有

通过CSS将标签的第二行缩进精确地低于第一行。

CSS文本结尾缩进

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS缩进第一行文本通过右侧边缘EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

css文本-在右侧缩进等效项

CSS替代第一行文本-缩进？

CSS -缩进除第一行外的所有

通过CSS将标签的第二行缩进精确地低于第一行。

CSS文本结尾缩进

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS缩进第一行文本通过右侧边缘
EN