有时候我们需要在文本域实现简单的样式。
比如我们在填写文本域的时候添加了回车和空格，但是存储到数据库再显示到页面标签上的时候，回车不复存在，空格多个只剩一个。
而在这些地方使用富文本编辑器又显得没有必要，那么怎么简单的实现这些样式的存储与显示呢。
先说回车。我们在文本域输入内容的时候有时候需要分几段，但是在存储的时候我们进行单步调试发现，填入的回车在数据里是有显示的，但是在存入数据库再显示到页面上之后就没有了。
也确实我们在数据库存储回车是没有存储的，这里最简单的方式是我们添加<br>标签。当然在取出来显示到页面上的时候需要让显示的内容支持html即可了，angular2的是使用[innerHtml]属性。
这是在存储之前，我们只需要把回车替换为<br>即可。
text.replace(/\n/g,'<br>')
这时候我们把<br>存储到数据库，取出来就有回车了。
空格呢，很多地方有多个空格我们怎么实现呢，很容易想到pre。
实际上在存储的时候我们的多个空格是正常存储的，只是显示的时候html默认多个空格显示一个而已。
实际css有个属性可以规定空格的显示方式
white-space
我们来看这个属性可能的值和描述
normal 默认值。 空白会被浏览器忽略。
pre 空白会被浏览器保留。其行为方式类似 HTML 中的pre标签
nowrap文本不会换行，文本会在在同一行上继续，直到遇到<br>标签为止。
pre-wrap 保留空白符序列，但是正常地进行换行。
pre-line 合并空白符序列，但是保留换行符。
inherit 规定应该从父元素继承 white-space 属性的值
这里就不一一试验了。我们这里使用pre-wrap，也就是空格正常显示，换行我们当然上面的<br>控制了。
如果使用pre那么不会换行，内容都会在一行显示，也就是换行还是需要正常的
综合上面2个，我们可以简单的实现在文本域存储和显示简单的空格和样式。
cnpm的使用
说明：因为npm安装插件是从国外服务器下载，受网络影响大，可能出现异常，如果npm的服务器在中国就好了，所以我们乐于分享的淘宝团队干了这事。来自官网：“这是一个完整 npmjs.org 镜像，你可以用此代替官方版本(只读)，同步频率目前为 10分钟 一次以保证尽量与官方服务同步。”
安装：命令提示符执行npm install cnpm -g --registry=https://registry.npm.taobao.org
注意：安装完后最好查看其版本号cnpm -v或关闭命令提示符重新打开，安装完直接使用有可能会出现错误
注：cnpm跟npm用法完全一致，只是在执行命令时将npm改为cnpm。
gulp自动刷新
livereload和webserver
网友评论