3

我想格式化我的文本：

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,

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

任何帮助，将不胜感激。

4

3 回答 3

1

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

<pre>
    <!-- your text stuff -->
</pre>
于 2012-07-06T08:38:13.213 回答
1

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;用于建立新的块格式化上下文。您可以使用overflow除默认值之外的任何值来执行此操作visible。

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

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

于 2012-07-06T08:47:32.097 回答
0

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

于 2012-07-06T09:53:35.530 回答