如何保留空白但忽略 CSS 中的换行符? [英] How to preserve whitespace but ignore line breaks in CSS?

问题描述

CSS-3 中的 white-space 属性具有 pre-wrap 值，它将保留空格和换行符，并在必要时换行，而 pre-line 值，它折叠空白，但保留换行符，并在必要时换行.

它没有的价值是保留空白和折叠换行符，同时仍然换行.

是否有其他 CSS 属性的组合可以用来获得这种效果?

例如:

这个例子代码应该呈现在一行但空间完好无损.

应该是这样的:

这个示例代码应该在一行上呈现，但空格完整.

解决方案

回答你的问题:不，没有办法只使用 CSS (没有像这样的行:collapse |保存 |...

唯一的方法是使用 JavaScript

document.body.innerHTML = document.body.innerHTML.replace(/\n/g, '');
html {空白:预包装；}
这个例子代码应该呈现在一行但空格完整.

硬编码方法

---

第一个

* {空白:预包装；}br{显示:无；}

这个例子<br/>code<br/>应该在一行渲染<br/>但是<br/><br/>

---

第二个

这个 例子代码应该  使成为上 一个 线 但带空格   完好无损.

The white-space property in CSS-3 has the pre-wrap value, which will preserve whitespace and line breaks, and wrap when necessary, and the pre-line value, which collapses whitespace, but preserves line breaks, and wraps when necessary.

What it does not have, though, is a value that preserves whitespace and collapses line breaks, while still wrapping otherwise.

Is there a combination of other CSS properties that I can use to get this effect?

For example:

This  example
code
should     render
on  one  line  but
with spaces     intact.

should look like:

This  example code should     render on  one  line  but with spaces     intact.

解决方案

Answer to your question: no, there is no way to do it by only using CSS (prove for white-space)

There is no line such as: collapse | preserve | ...

The only way to do it is by using JavaScript

document.body.innerHTML = document.body.innerHTML.replace(/\n/g, '');

html {
  white-space: pre-wrap;
}

This  example
code
should     render
on  one  line  but
with spaces     intact.

Hardcode methods

---

1st

* {
  white-space: pre-wrap;
}

br {
    display: none;
}

This  example<br/>code<br/>should     render<br/>on  one  line  but<br/>with spaces     intact.<br/>

---

2nd

This  example
code
should     render
on  one  line  but
with spaces     intact.

这篇关于如何保留空白但忽略 CSS 中的换行符?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！