javascript - 保留空白,忽略换行符

标签 javascript html css

我正在创建一个文本编辑器,我希望设置 white-space CSS 属性选项,以便保留空格和 nbsp,但 HTML 代码中出现的换行符不会导致换行。

我正在创建的文本编辑器的所有边都有边距,我希望文本在到达

标记的末尾时换行。我希望用户能够在文档中放置尽可能多的空格而不压缩它们。

目前,我有 white-space:pre-wrap; ,但文档代码中的任何换行符也会导致文档中出现换行符。这些换行符是由我的文档转换器引起的,除非绝对必要,否则我不想修改它。虽然我不是很确定,但我非常怀疑 Firefox、Google Chrome、Internet Explorer 和 Safari 是否都避免在代码中放置换行符。因此,我认为我最好的选择可能是设置 white-space 属性。

从我读到的关于 white-space:pre-line 的内容来看,这听起来与我想要的完全相反,它折叠空格,并在代码换行符处中断;

我想得到一个使用纯 CSS 的答案,但我也许可以使用一点 Javascript,但我不想这样做,因为这个问题不是最极端的。

谢谢!

编辑: 这是当前发生的情况的 JSFiddle 演示:http://jsfiddle.net/tXSQj/

代码:
<p>A test paragraph</p> 代码结束

我想这样做,以便示例中的“段落”一词不会跳过一行 对它之前的换行符做。

最佳答案

抱歉,我不确定是否有简单的 CSS 解决方案。使用 JavaScript 可能更容易:

HTML:
<p id = "code">[stuff]</p>
<!-- Set the CSS white-space property to pre-wrap. -->

JavaScript:
var codeElem = document.getElementById("code");
codeElem.innerHTML = codeElem.innerHTML.split("\n").join(" ↵ ");

关于javascript - 保留空白,忽略换行符,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24499895/

相关文章:

html - 为什么具有 ID 和 Class 的元素需要在 CSS 中组合 ID 和 Class 选择器?

jquery - 使用显示更少/更多选项截断多行 HTML 绑定(bind)

javascript - 如何使使用 Google Javascript Map API 制作的 map 加载并且不保持白色

html - 如果 HTML 中缺少表情符号,则显示一些文本

javascript - 匹配字符但不匹配前面有

javascript - onDrag 事件 clientX 在 Firefox 中始终为 0

html - (asp.net MVC5) 根据称为 profibility 的方法返回的内容更改表格的背景颜色

html - 为什么我的 HERO 不显示上面有文字的图像?

javascript - 如何在 javascript 的正则表达式中使用 # :. [ 等字符定义单词边界

javascript - 检测 iframe 对象中的 src/location 变化