从第二行开始缩进一段文本

Question

我希望格式化我的文本：

标题 - 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, 

我对任何不需要手动更改文本的解决方案都很感兴趣。非常感谢您的帮助。

- Mateusz Rogulski

---

如果你真的想在不添加标签的情况下解决这个问题，你可以更详细地阐述格式。标题可以包括什么？ - 可以作为分隔符吗？ - kapa

是的，'-'可以作为分隔符。 - Mateusz Rogulski

Answer 1

一个快速而不太规范的解决方案：

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

- Johan

---

好的，我还没有写过这个问题，但我不想要集成在我的代码中的解决方案。你有什么想法吗？ - Mateusz Rogulski

什么是全局解决方案？ - kapa

类似于JavaScript或CSS的东西，可以使其例如有1000行。 - Mateusz Rogulski

Answer 2

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演示

标题向左浮动，并使用overflow: hidden;来建立新的块级格式化上下文。您可以使用除默认值visible以外的任何overflow值来实现此目的。

唯一不完全跨浏览器的是:after伪元素（从IE8开始工作），但您可以在HTML中使用静态-代替。我选择这样做是因为它更清晰，标记中没有不必要的样式。

对于标题，您可以使用更语义化的内容，例如适当的标题（h1，h2等）。

- kapa

---

谢谢您的回答，但是我所有的文本都在一个地方，没有分成“标题”和“正文”部分。 - Mateusz Rogulski

@MateuszRogulski 利用正则表达式。 - Johan

@MateuszRogulski 嗯，要正确格式化它，您还需要适当的标记。您可以找到一些hacky方法来格式化它，但正确的方法是更改标记。如果您错过了基础，屋顶永远不会稳定。 - kapa

Answer 3

通过使用 margin 和 text-indent 以及 :first-line 伪类，您可以实现所需的效果：以下是相关的 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>标签）

- Fabrizio Calderan

---

我以前看过:first-line，但我没有将它与text-indent联系起来。谢谢！ - Mateusz Rogulski