缩进第二行的文本块

Indent a block of text from the second row

本文关键字：二行 文本 缩进      更新时间：2023-09-26

我想使格式成为我的文本：

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,

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

任何帮助将不胜感激。

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

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

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等）。

使用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>标签）

相关文章：