Question

我想要格式化我的文字：

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,

我对任何没有手动添加更改文本的解决方案感兴趣。

任何帮助都将不胜感激。

Answer 1

快速而肮脏的解决方案：

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

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 Demo

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

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

对于标题，您可以使用更合理的标题（h1，h2等）。

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"字的宽度。

作为旁注，如果您可以更改标记本身，我建议将该单词从您的文本移动到content伪类的:before属性 - 事实上您的文本是标题从语义的角度来看，应该通过元素的选择来传达（所以我会选择一个<hn>标签）

从第二行缩进一段文本

3 个答案: