缩进文本从第二排

我希望让我的格式文本块：缩进文本从第二排

title - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et turpis urna. Phasellus magna elit, tempus ut accumsan posuere, suscipit vel ligula. Vestibulum mauris massa, venenatis non dignissim vestibulum,

的样子：

title - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et turpis urna. 
     Phasellus magna elit, tempus ut accumsan posuere, suscipit vel ligula. Vestibulum 
     mauris massa, venenatis non dignissim vestibulum,

我在不加改变文本的任何解决方案感兴趣手动。

任何帮助，将不胜感激。

来源

2012-07-06 Mateusz Rogulski

如果你真的想在不添加标签的情况下解决这个问题，你可以更详细地说明格式。标题包括什么？ '-'可以作为分隔符吗？ – kapa 2012-07-06 10:02:38

是的，'''可以分隔 – 2012-07-06 10:11:27

与margin并与:first-line一起text-indent打伪类，你可以达到预期的效果：这里是有关的CSS

p { text-indent: -2.35em ; margin-left: 2.35em } 
p:first-line { margin-left: -2.35em }

例小提琴：http://jsfiddle.net/nb88K/

请注意，选择的值是严格依赖于字的宽度为"title"。

一点题外话，如果你能够改变的标记本身我反而建议这个词从你的文字移至:before伪类—的事实，你的文字是一个标题，从语义点的content财产，应该通过元素的选择来传达（所以我会选择一个<hn>标签）

来源

2012-07-06 09:53:35 fcalderan

我曾经看过'：first-line'，但是我没有用'text-indent'连接它。谢谢！ – 2012-07-06 10:09:47

一个快速和肮脏的解决方案：

<pre> 
    <!-- your text stuff --> 
</pre>

来源

2012-07-06 08:38:13 Johan

好吧，我没有写这个，但我不想要我的代码中集成的解决方案，我有搜索全局解决方案。有任何想法吗？ – 2012-07-06 08:44:21

全球解决方案是什么意思？ – kapa 2012-07-06 08:44:58

有点像javascript或css可以让它成为1000行。 – 2012-07-06 08:46:29

HTML

<div class="title">title</div> 
<div class="text"> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et turpis urna. Phasellus magna elit, tempus ut accumsan posuere, suscipit vel ligula. Vestibulum mauris massa, venenatis non dignissim vestibulum, 
</div>

CSS

.title { float: left; } 
.title:after { content: '-'; display: inline-block; margin: 0 5px; } 
.text { overflow: hidden; }

jsFiddle Demo

标题左移，overflow: hidden;用于establish a new block formatting context。您可以使用除默认visible以外的任何overflow值进行此操作。

在这唯一的一点，是不是绝对的跨浏览器是:after伪元素（which works from IE8），但你可以简单地使用你的HTML静态-代替。我选择这样做是因为它更清洁，标记中没有不必要的样式。

对于标题，您可以使用更多的语义，如适当的标题（h1,h2等）。

来源

2012-07-06 08:47:32 kapa

感谢您的回答，但我已将所有文本分为“标题”和“文本”部分。 – 2012-07-06 08:57:26

@MateuszRogulski利用正则表达式 – Johan 2012-07-06 09:04:16

@MateuszRogulski那么，要正确格式化它，你还需要适当的标记。你可以找到一些奇怪的方式来格式化，但正确的方法是改变标记。如果你错过了基础，屋顶将永远不会稳定。 – kapa 2012-07-06 09:59:14

缩进文本从第二排

回答

相关问题