首页 / 知识

如何使用CSS在HTML文档中插入换行符

2023-04-15 12:57:00

How to insert line breaks in HTML documents using CSS

我正在写一个Web服务，我想将数据作为XHTML返回。因为它是数据，而不是标记，所以我想保持它非常整洁-没有多余的 s或 s。但是，为了方便开发人员，我还想使返回的数据在浏览器中合理可读。为此，我正在考虑使用CSS的一种好方法。

我特别想做的是在某些地方插入换行符。我知道display: block，但是在我现在要处理的情况下它并不能真正起作用-具有字段的form。像这样：

1
2
3
4
5
6

<form>
Thingy 1: <input class="a" type="text" name="one" />
Thingy 2: <input class="a" type="text" name="two" />
Thingy 3: <input class="b" type="checkbox" name="three" />
Thingy 4: <input class="b" type="checkbox" name="four" />
</form>

我希望它可以呈现，以便每个标签显示在与相应输入字段相同的行上。我已经试过了：

1	input.a:after { content:"\\a" }

但这似乎无济于事。

最好将所有元素包装在label元素中，然后将css应用于标签。：before和：after伪类不能以一致的方式完全支持。

标签具有很多优点，包括增加的可访问性(在多个级别上)等等。

1
2
3

<label>
Thingy one: <input type="text" name="one">;
</label>

然后在标签元素上使用CSS ...

1	label {display:block;clear:both;}

表单控件是由浏览器专门处理的，因此很多事情不一定能正常工作。其中之一就是生成的内容-它不适用于表单控件。而是将标签包裹在中并使用label:before { content: '\\a' ; white-space: pre; }。您也可以通过浮动所有内容并将clear: left添加到元素来完成此操作。

看起来您想在列表中显示一堆表单项，对吗？嗯...如果只有那些HTML规范人员认为包含标记来处理项目列表...

我建议您这样设置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<form>

<ul>

<li>
<label>Thingy 1:</label><input class="a" type="text" name="one" />
</li>

<li>
<label>Thingy 1:</label><input class="a" type="text" name="one" />
</li>

</ul>

</form>

然后，CSS变得容易得多。

以下内容将为您提供换行符。但是，这也会在前面增加多余的空间...您必须通过删除制表符来弄乱源代码缩进。

1	form { white-space: pre }

1
2
3
4
5
6
7
8
9

1
2
3
4
5
6

<form>
<label>Thingy 1: <input class="a" type="text" name="one" /></label>
<label>Thingy 2: <input class="a" type="text" name="two" /></label>
<label>Thingy 3: <input class="b" type="checkbox" name="three" /></label>
<label>Thingy 4: <input class="b" type="checkbox" name="four" /></label>
</form>

和以下CSS

1	form label { display: block; }

一种选择是在XML中指定XSLT模板，(某些)浏览器将处理该XSLT模板，从而允许您包含不影响Web服务使用者的带有标记，CSS，颜色等的表示形式。

在XHTML中，您只需在CSS元素周围添加一些填充，例如

格式input.a {margin-bottom：1em}

秘诀是将整个小东西，标签和小部件包围在一个范围内，该范围内的类负责阻止并清除：

的CSS

1
2
3
4
5
6

的HTML

1
2
3
4
5
6

<form>
<span class="lb">Thingy 1: <input class="a" type="text" name="one" /></span>
<span class="lb">Thingy 2: <input class="a" type="text" name="two" /></span>
<span class="lb">Thingy 3: <input class="b" type="checkbox" name="three" /></span>
<span class="lb">Thingy 4: <input class="b" type="checkbox" name="four" /></span>
</form>

javascript选项使事情变得更加复杂。按照Jon Galloway或daniels0xff的建议进行操作。

CSS clear元素可能是您要寻找的换行符。
沿途：