文章/答案/技术大牛

发布

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

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

Stack Overflow用户

提问于 2013-06-19 11: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

html

css

text-indent

回答 3

Stack Overflow用户

发布于 2013-06-19 11: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 12: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 12: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

复制

相似问题

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

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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