js css 文字换行显示

原创于 2020-07-24 15:39:36 发布 · 4.8k 阅读

本内容遵循CC 4.0 BY-SA版权协议

标签

#html #css #js

本文探讨了在前端开发中如何优雅地处理和展示包含换行符和空格的文本数据，提供了三种实现方法：直接使用表单输入框、CSS样式调整以及JavaScript动态替换，旨在提升用户体验。

在开发过程中会碰到表单输入框中含有换行空格字符的数据保存后，在前端也能展示效果。实现方式有几种：

问题：
在这里插入图片描述

.text{
	border: 1px solid #e1e1e1;
	padding: 5px; 
	white-space: pre-wrap;
	word-break: break-all;
}

效果：
在这里插入图片描述

// html
<div id="text"></div>

// javascript
var txt = txt.replace(/\n/g, "<br/>");
$('#text').html(txt)
// jq