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

这是一个jsFiddle

4

3 回答 3

0

据我了解，您的预期结果是这样的：

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

最简单的方法可能是使用 Javascript。您可以检测到第 2 行和过去的行，并使用 200px 的 padding-right 将标签包裹在它们周围。

您可能需要使用 jQuery 或类似方法来执行此操作。

糟糕的是，无法为伪元素设置宽度/高度或填充:first-line。

于 2013-06-19T12:59:45.907 回答
0

text-indent 可能来自父级。带填充物。

http://jsfiddle.net/qsDST/

#wrapper {
    width: 300px;
    text-indent: -200px;
    padding-left:200px;
}
h1 {
    background: lime;
    display:inline;
}
于 2013-06-19T11:59:19.020 回答
0

这是你想要的吗？

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

演示

第二种方法

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

演示

于 2013-06-19T12:18:47.263 回答