如何使用 CSS 在 HTML 文档中插入换行符
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/65849/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to insert line breaks in HTML documents using CSS
提问by Jim
I'm writing a web service, and I want to return the data as XHTML. Because it's data, not markup, I want to keep it very clean - no extra <div>s or <span>s. However, as a convenience to developers, I'd also like to make the returned data reasonably readable in a browser. To do so, I'm thinking a good way to go about it would be to use CSS.
我正在编写一个 Web 服务，我想将数据作为 XHTML 返回。因为它是数据，而不是标记，所以我想保持它非常干净——没有额外的<div>s 或<span>s。但是，为了方便开发人员，我还想让返回的数据在浏览器中具有合理的可读性。为此，我在想一个很好的方法是使用 CSS。
The thing I specifically want to do is to insert linebreaks at certain places. I'm aware of display: block, but it doesn't really work in the situation I'm trying to handle now - a formwith <input>fields. Something like this:
我特别想做的是在某些地方插入换行符。我知道display: block，但它在我现在尝试处理的情况下并没有真正起作用 -form带有<input>字段。像这样的东西：
<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>
I'd like it to render so that each label displays on the same line as the corresponding input field. I've tried this:
我希望它能够呈现，以便每个标签与相应的输入字段显示在同一行。我试过这个：
input.a:after { content: "\a" }
But that didn't seem to do anything.
但这似乎没有任何作用。
回答by BrewinBombers
It'd be best to wrap all of your elements in label elements, then apply css to the labels. The :before and :after pseudo classes are not completely supported in a consistent way.
最好将所有元素包装在标签元素中，然后将 css 应用于标签。:before 和 :after 伪类没有以一致的方式完全支持。
Label tags have a lot of advantages including increased accessibility (on multiple levels) and more.
标签标签有很多优点，包括增加可访问性（在多个级别）等等。
<label>
Thingy one: <input type="text" name="one">;
</label>
then use CSS on your label elements...
然后在标签元素上使用 CSS ...
label {display:block;clear:both;}
回答by Jim
Form controls are treated specially by browsers, so a lot of things don't necessarily work as they should. One of these things is generated content - it doesn't work for form controls. Instead, wrap the labels in <label>and use label:before { content: '\a' ; white-space: pre; }. You can also do it by floating everything and adding clear: leftto the <label>elements.
浏览器对表单控件进行了特殊处理，因此很多东西不一定能正常工作。其中之一是生成的内容 - 它不适用于表单控件。相反，将标签包裹起来<label>并使用label:before { content: '\a' ; white-space: pre; }. 您也可以通过浮动所有内容并添加clear: left到<label>元素来实现。
回答by Jon Galloway
It looks like you've got a bunch of form items you'd like to show in a list, right? Hmm... if only those HTML spec guys had thought to include markup to handle a list of items...
看起来您有一堆想要显示在列表中的表单项，对吗？嗯...如果只有那些 HTML 规范的人想到包含标记来处理项目列表...
I'd recommend you set it up like this:
我建议你这样设置：
<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>
Then the CSS gets a lot easier.
然后 CSS 变得容易多了。
回答by Jimmy
the following would give you the newlines. It would also put extra spaces out in front though... you'd have to mess up your source indentation by removing the tabbing.
以下将为您提供换行符。不过，它也会在前面放置额外的空格……您必须通过删除制表符来弄乱源缩进。
form { white-space: pre }
回答by DamienG
One option is to specify a XSLT template within your XML that (some) browsers will process allowing you to include presentation with mark-up, CSS, colors etc. that shouldn't affect consumers of the web service.
一种选择是在您的 XML 中指定一个 XSLT 模板，（某些）浏览器将处理该模板，允许您包含带有标记、CSS、颜色等的演示文稿，这些不应影响 Web 服务的使用者。
Once in XHTML you could simply add some padding around the elements with CSS, e.g.
在 XHTML 中，您可以简单地使用 CSS 在元素周围添加一些填充，例如
form input.a { margin-bottom: 1em }
表单 input.a { margin-bottom: 1em }
回答by daniels
<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>
and the following css
和以下css
form label { display: block; }
回答by Galen
<style type="text/css">
label, input { float: left; }
label { clear:left; }
</style>
<form>
<label>thing 1:</label><input />
<label>thing 2:</label><input />
</form>
回答by Galen
The secret is to surround your whole thingie, label and widget, in a span whose class does the block and clear:
秘诀是将整个事物、标签和小部件包围在一个跨度中，该跨度的类会阻止并清除：
<style type="text/css">
.lb {
display:block;clear:both;
}
</style>
<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>
回答by lordscarlet
The javascript options are all over complicating things. Do as Jon Galloway or daniels0xff suggested.
javascript 选项使事情变得复杂。按照 Jon Galloway 或 daniels0xff 的建议进行操作。
回答by Thunder3
I agree with John Millikin. You can add in <span>tags or something around each line with a CSS class defined, then make them display:block if necessary. The only other way I can think to do this is to make the <input>an inline-block and make them emit "very large" padding-right, which would make the inline content wrap down.
我同意约翰米利金的观点。您可以在<span>定义了 CSS 类的每一行周围添加标签或其他内容，然后在必要时使它们显示：块。我能想到的唯一另一种方法是制作<input>一个内联块并使它们发出“非常大”的填充权，这将使内联内容回绕。
Even so, your best bet is to logically group the data up in <span>tags (or similar) to indicate that that data belongs together (and then let the CSS do the positioning).
即便如此，最好的办法还是将数据按逻辑分组在<span>标签（或类似标签）中，以表明该数据属于一起（然后让 CSS 进行定位）。
