当前位置: 首页 > article >正文

利用textarea和white-space实现最简单的文章编辑器 支持缩进和换行

当你遇到一个非常基础的文章发布和展示的需求,只需要保留换行和空格缩进,你是否会犹豫要使用富文本编辑器?实际上这个用原生的标签两步就能搞定!

1.直接用textarea当编辑器

textarea本身就可以保存空格和换行符,示例如下:

2.给展示的区域设置white-space: pre-wrap;

这是css3新增的属性,可以保留连续的空格和换行符。相似的还有个pre-line,也能保留换行符,但是会合并连续空格为一个,这里为了保留原文的缩进,因此用pre-wrap更合适。

另外如果是小程序开发可以直接用<text>标签,不用设置white-space。

 

是否显示连续空格和空格的字符大小都是可配置的。详见uniapp文档:

text组件 | uni-app官网


http://www.kler.cn/a/273408.html

相关文章:

  • OpenEuler 使用ffmpeg x11grab捕获屏幕流,rtsp推流,并用vlc播放
  • 【React】初学React
  • Docker-安装
  • Spring Boot 配置文件启动加载顺序
  • 模型 海勒姆法则(用户依赖你未承诺的API功能)
  • CODESYS可视化星三角降压启动程序控制电气动画图
  • vue使用element-ui 实现自定义分页
  • TT-100K数据集,YOLO格式
  • MR混合现实情景实训教学系统在汽车检修课堂中的应用
  • 汽车电子零部件(8):T_Box
  • vsto excel 插件注册表属性值含义
  • linux学习之Socket
  • 多ip多进程代理的实现方法
  • Github 2024-03-18开源项目日报Top10
  • 动态规划(蓝桥杯 C++ 题目 代码 注解)
  • [TJOI2010] 阅读理解 **STL**Tire树**
  • 003——移植鸿蒙
  • Coursera上Golang专项课程3:Concurrency in Go 学习笔记(完结)
  • LLM 构建Data Multi-Agents 赋能数据分析平台的实践之②:数据治理之一
  • 旋转花键的制造工艺
  • 在ubuntu下安装MQTT 服务
  • 将VSCode添加至右键的菜单栏
  • 使用 Redisson 实现分布式 CountDownLatch,如何使用RCountDownLatch实现内外网数据互通的超时控制?
  • ROS2纯跟踪实现(C++)
  • MYSQL日志 redo_log更新流程 bin_log以及bin_log数据恢复
  • STM32CubeIDE基础学习-BEEP蜂鸣器实验