从第二行缩进一段文本答案

【问题标题】：Indent a block of text from the second row从第二行缩进一段文本
【发布时间】：2012-07-06 18:12:32
【问题描述】：

我想格式化我的文本：

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,

我对任何解决方案都很感兴趣，无需手动添加更改文本。

任何帮助将不胜感激。

【问题讨论】：

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

标签： javascript jquery html css layout

【解决方案1】：

快速而肮脏的解决方案：

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

【讨论】：

好的，我还没有写过这个，但我不想要集成在我的代码中的解决方案我有搜索全局解决方案。有什么想法吗？
全局解决方案是什么意思？
类似 javascript 或 css 的东西可以使它成为例如 1000 行。

【解决方案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 Demo

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

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

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

【讨论】：

感谢您的回答，但我将所有文字合二为一，它不分为title 和text 部分。
@MateuszRogulski 使用正则表达式
@MateuszRogulski 好吧，要正确格式化它，您还需要正确的标记。您可以找到一些 hacky 方法来格式化它，但正确的方法是更改标记。如果您错过了基础，屋顶将永远不会稳定。

【解决方案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>标签）

【讨论】：

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