html - CSS 缩进第一行文本超过右边缘

标签 html css text-indent

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

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 像素。也许有一个类似的 CSS 属性可以在右边缘周围应用缩进或应用于第二行和后面的文本行。

Here is a jsFiddle

最佳答案

文本缩进可以来自父级。带填充。

http://jsfiddle.net/qsDST/

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

关于html - CSS 缩进第一行文本超过右边缘,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17190554/

相关文章:

css - 更改交替行字体颜色

javascript - 鼠标移动事件在 mozilla 中不起作用

将 div 移动到顶部然后移动到中心的 CSS 动画

latex - Latex 包 "indentfirst"无法在 R-markdown 中工作

JQuery Mobile 1.4.0 - 托管文件... CSS 不工作

javascript - 在多个选择下拉列表中,选定的下拉列表值(选项)需要隐藏在剩余的下拉列表中

css - 缩进文本区域内的所有行

具有事件元素的 Css 嵌套列表以填充整行

html - 如何更改药丸的 CSS? ( Angular 2)

javascript - 将一个 div 或图像拖到 textarea 中并在其中放置一个值