CSS 内联文本，随机行填充/排水沟答案

【问题标题】：CSS inline text, random line paddings/guttersCSS 内联文本，随机行填充/排水沟
【发布时间】：2012-04-10 20:21:34
【问题描述】：

我正在尝试对副标题做一些不同的事情，从而使文本看起来有点混乱。我不想将标记更改为具有<br/>s 和其他元素。

我想知道是否有人对如何纯在 css 中完成此操作有一个巧妙的想法。看看图片：

所以在这个例子中，我们在左右两边都有点……奇怪的装订线和边距。

我想知道这是否可能。同样，我宁愿不更改简单的标记，即：

<h2>The quick brown fox jumps over the lazy dog.</h2>

【问题讨论】：

为什么？如果这是您想要实现的布局，为什么不输入一些简单的<br>s？
这会给 RSS 和未来的重新设计带来烦恼。它只是在代码方面有点混乱......卫生？如果这是一个术语

标签： html css padding

【解决方案1】：

试试这个。

<html>
<head>
<style type="text/css">
p
{
white-space:pre;
}
</style>
</head>
<body>

<p>
The quick brown fox 
   jumps over the  
 lazy dog
</p>

</body>
</html>

【讨论】：

哦，我喜欢它.....没有额外的标签，它不会对 RSS 和未来的校对产生影响，这只是添加随机空白的情况！！！....点！！
说真的，很喜欢，如果我整天都在摆弄我就不会想到这一点......这就是为什么 Stackoverflow 非常有用......我将继续讨论这个问题几个小时，以防任何其他天才有其他建议，否则我会这样做！
@Alex，即使我也有同感，我会在几分钟内问他们一些问题，有人会给出一个答案，10 分钟后，我会得到比我要求的更好的答案.
我认为你的观点在下面得到了证明。我之所以要这个答案，只是因为它更接近于不改变事物的简报，也空白：pre 不适用于 ie8 .. 遗憾的是，如今这仍然是一个考虑因素，而 Lister 先生的 css 选项似乎是在ie8中很好

【解决方案2】：

在不更改原始标记的情况下，我得到了这样的结果：jsFiddle

h2 {
 width:10em; text-indent:-2em; margin-left:1em;
}
h2:before {
 display:block; content:''; float:left; width:1em; height:2em;
}

【讨论】：

那是一种美，我真的很敬畏。谢谢你！

【解决方案3】：

不改变你的标记，这对于纯 CSS 是不可能的

【讨论】：

嗯，希望不是这样，认为有人可能对第一个字母上的伪元素负边距等有一个想法。
我可以，但我希望不这样做，我知道我可以做一些 javascript 后加载以及一些 php 来分块流，但那将是我第二喜欢的选项