Question

我正在尝试做一些与subheaders有点不同的事情，因为文本看起来有些混乱。我不想将标记更改为<br/>和其他元素。

我想知道是否有人知道如何做到这一点纯粹在css 。看看图片：

enter image description here

所以在这个例子中我们有......奇怪的排水沟和左右边距。

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

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

Answer 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>

Answer 2

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

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

Answer 3

在不更改标记的情况下，使用纯CSS

是不可能的

CSS内联文本，随机线填充/排水沟

3 个答案: