【前端学习记录】如何在div中保持文本的格式（如换行、空格等）

Note_creek Note_creek 博客等级 墨衍会员 · AI 创作全网分发 墨衍智能分发 本文由作者通过墨衍一键同步至各平台 1分发平台 1.8k累计阅读 1.8k平均单平台 已同步平台 优快云 微信公众号 微博 知乎 掘金 百家号 博客园 抖音 小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年，写一次发全网 我也要 码龄10年
关注
原创 最新推荐文章于 2026-09-01 16:20:42 发布 1.8k 阅读 AI 写同款· GEO 优化 ›
Emmet实战指南：用HTML缩写语法提升前端编码效率 HTML缩写语法是现代前端开发中提升编码效率的基础技术，其核心原理是将DOM树结构映射为线性表达式，实现语义化标签的快速生成。通过父子（>）、兄弟（+）、重复（*）等符号组合，开发者可脱离逐字敲写，专注页面结构设计与语义合理性判断。该技术具备零运行时依赖、编辑器原生集成、跨语言支持（HTML/CSS/JSX）等工程优势，广泛应用于静态博客网页制作、运营跳转页快速搭建、Bootstrap/Materialize响应式布局等高频场景。本文以VSCode环境下的Emmet实践为切入点，系统解析其语法逻辑、配置要点 阅读详情

使用样式：white-space: pre-wrap。但是这样会在文本的前后自动增加一个空格，

解决方法： 在所包含的文字上，再包一层span标签即可

收录于
前端

当前文章被收录于：

前端
26 篇文章 1 人学习
订阅专栏 查看详情
标签
#前端 #html5 #css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
Emmet 快速入门：VSCode 中 HTML/CSS 结构化编码实战指南 Emmet 是一种基于树状结构和语义规则的前端代码缩写技术，其核心原理是将 HTML 元素、属性、嵌套与重复模式映射为极简文本指令，从而实现所见即所得的结构生成。它依托编辑器原生集成（如 VSCode 开箱即用），具备高可扩展性与低学习门槛，显著提升页面骨架搭建、响应式布局编写及文档示例填充等工程效率。尤其在快速原型开发、团队协作标准化、新人上手培训等场景中，Emmet 通过 `!` 文档模板、`>` 子元素、`*` 重复、`$` 动态编号等关键热词能力，让开发者专注逻辑设计而非语法细节。 阅读详情

相关推荐

从零实现流式Markdown解析器：状态机与渐进式渲染实战

流式处理是一种高效的数据处理模式，它通过将数据视为连续流并分块处理，实现了低延迟和低内存占用的优势。其核心原理在于状态机的设计，能够保持解析上下文，逐步处理数据块。在技术价值上，流式处理特别适用于实时预览、大文档加载和网络流传输等场景，显著提升用户体验。在前端开发中，Markdown解析器是常见需求，而流式解析器则能更好地应对超长文档和实时交互。本文聚焦于流式Markdown解析器的实现，深入探讨状态机设计、缓冲区管理和渐进式渲染等关键技术，帮助开发者掌握流式处理在前端解析中的应用。

weixin_34318326的博客 622

div+pre标签的组合实现文本原格式显示与自动换行

TEST div { width: 100px; white-space: normal; } pre { white-space: pre-wrap; /*css-3*/ white-space: -moz-pre-wrap; /*Mozilla,since1999*/ white-space:

Somethings 773

电源芯片TPS54560典型应用电路及设计详解

TPS54560 是一款配有集成型高侧 MOSFET 的 60V、5A DC-DC转换器，输入电压范围7-60V，输出电压可通过外部反馈电阻设置成略低于输入电压的任意值。**所以，**R5=31.25KΩ、R6：10KΩ（常用值）时，即可设置输出电压为 3.3V。**所以，**R5=140KΩ、R6：10KΩ（常用值）时，即可设置输出电压为12V。设计 TPS54560 的输出电压时，主要通过外部反馈电阻网络来设置输出电压。因此，输出 3.3V ，输入电压24V时推荐的电感值为 8µH 至 10µH。

weixin_42306872的博客 1万+

HTML之常用标签

一.基本结构标签 **###注：下面的（）在HTML文件是以<>形式存在的** 1.（HTML）：表示该文件为HTML文件 2.（HEAD）：包含文件的标题,使用的脚本,样式定义等 3.(TITLE）—（/TITLE）：包含文件的标题,标题出现在浏览器标题栏中 4.(/HEAD)：(/HEAD)的结束标志 5.（BODY）：放置浏览器中显示信息的所有标志和属性,其中内容在浏览器中显示....

forever_wen的博客 1243

CTP开发实战：如何高效处理预埋单与委托单的完整流程（附代码示例）

本文深入探讨了CTP开发中预埋单与委托单的完整处理流程，从订单生命周期理解、核心代码实现到异步事件处理与系统健壮性构建。通过详细的代码示例和状态机分析，为开发者提供了构建高可靠订单处理系统的实战指南，重点解决了状态同步、异常恢复等关键工程挑战。

weixin_29234239的博客 116

ZYNQ Linux下UIO中断配置避坑实录：从设备树修改到用户层测试（Vivado 2018.2）

本文详细解析了ZYNQ Linux下UIO中断配置的全流程，从设备树修改到用户层测试，特别针对Vivado 2018.2环境中的常见陷阱提供解决方案。内容涵盖中断号配置规则、用户空间中断处理程序编写以及性能优化技巧，帮助开发者高效实现硬件中断的用户空间控制。

weixin_31854867的博客 333

div+css实现文本原格式显示与自动换行

html的标签用可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。 而为了限制文本显示的范围，一般使用div+css设定自动换行或缩略等样式。对于未知的文本格式，如果要求文本单行过长时换行显示，并且保留原文本的空格和换行符，就可以通过div+pre标签的组合，再分别设定各自的样式来实现（pre标签一般不适用width属性） TEST

outstandzhou的专栏 7084

冷源法测试噪声系数（Noise Figure）详细步骤

背景知识 电阻负载的功率谱密度 噪声等效模型 3 4 冷源法测试步骤 注意事项

eleday的电子世界 6871

前端H5技术实现解析文件内容（txt为例）

背景在做项目的时候经常遇到上传文件解析内容的功能，平常常用的做法是上传文件到服务端，然后解析完毕后输出前端。但更常见的只是解析内容而已，无须上传文件到服务端，更没有必要将数据前后端流转加重服务端压力。以前之所以这么做是因为安全机制，涉及到数据的处理基本都在后端实现，但是随着浏览器端技术的迭代更新，H5技术强大之处逐渐凸显，感谢H5。废话不多说，贴代码首先，大前端HTML：<input type="f

sRhee的博客 9535

飞塔防火墙CVE-2022-40684漏洞复现：手把手教你搭建靶场环境（附调试技巧）

本文详细指导如何搭建Fortinet飞塔防火墙CVE-2022-40684认证绕过漏洞的靶场环境，涵盖虚拟机部署、网络配置、调试模式开启及漏洞原理分析。通过手把手教程，读者可掌握漏洞复现与深度调试技巧，深入理解该认证绕过漏洞的利用与防御。

h6i7j8的博客 695

【干货攻略】Oracle报错篇 ORA-01378 磁盘扇区大小不兼容问题

本期将为大家分享“ORA-01378 磁盘扇区大小不兼容”报错的问题解决方案。

PWY13148的专栏 1437

前端保持原有数据格式的样式

当项目中遇到后端返回的数据带格式的字符串时，前端该怎么处理保留其空格和换行符的问题： 方法一：css方法 white-space: pre-wrap; // css保留空格和换行符 white-space: pre-line; // css保留换行符 方法二： pre标签法（推荐） 使用<pre>{{content}}</pre>标签,同时需要注意，content与pre标签要在同一行，否则会出现首行缩进现象。 ...

hope2019的博客 1296

ABAP链接外围数据库SQL实战案例

这是一个ABAP 直接读取SQL数据库数据的实例，以此种方式可以将SAP与外围的系统做一些集成，比如生产，SAP本身生产这部分是弱项，管不了那么细，很多车间的数据都是在MES系统，如管理上需要则可以将MES的一些数据自动读取过来，结合SAP本身的业务数据，做一些分析是比较方便的。 1、首先在SAP里建立数据库链接：DBCO ，直接增加一条记录，填上数据库的相关信息：IP地址、数据库名、账号SA、密码这些。 2、开发程序，设置成自动运行的计划，固定时间自动读取SQL里的数据，保存到SAP自定义表.

heng0757的专栏 1511

数据库的换行符到前端不展示了

这个样式特别有用，当您想要在HTML中保留源代码的格式或者在文本中保留换行和空格时，而又不希望文本在一行内超出容器宽度时。：这是一个CSS属性，用于确定如何处理元素中的空白符（如空格、制表符、换行符等）。是一个CSS样式属性，用于控制元素中的空白如何处理。是这样的原本数据库中的数据都是带有\n换行符的但是页面却一直不展示。可以确保文本既保持原有的格式，又能在容器边界处适当换行。

m0_62458145的博客 578

【踩坑记录】pandas.to_sql 报 “‘Engine‘ object has no attribute ‘cursor‘”，最后竟然是环境问题

摘要 本文记录了使用pandas+SQLAlchemy+pymysql将数据写入MySQL时遇到的"Engine对象无cursor属性"错误及其解决方案。问题表现为to_sql方法将SQLAlchemy引擎误认为普通DBAPI连接，导致调用cursor()方法失败。经排查发现，这是由于pandas/SQLAlchemy环境损坏所致，而非代码问题。最终通过完全卸载并重新安装pandas(≥2.1)、SQLAlchemy(≥2.0)和pymysql解决了该问题。文章还建议将遗留的read_s

每日出拳老爷子的博客 336

大中型超市收银系统(可直接运行)

光步前台收银系统系统功能：商品销售、商品退货、挂单、收银员权限、会员销售、单品取消、整单取消、商品查询、脱机销售、脱机数据上传，基本资料下载，开钱箱、小票打印、收款结算，支持多币种付款方式（现金、储值卡、礼券、微信等）,支持多种促销。运行环境：.net 4.0登陆信息用户名:1001 密码:123456内置商品信息，商品编码可输入00001000 - 00010000,测试效果相关功能键F5 结算 F9挂单 F11商品查询 F8退货 Insert单品取消 Del整单取消 F12开钱箱F2 会员 Ctrl+Z退出系统 Home 锁屏 相关源码待公开

富文本转Markdown格式粘贴：从剪贴板原理到Typora实战

富文本格式转换是技术文档写作和知识管理中的常见需求，其核心原理在于理解操作系统剪贴板的多格式数据承载机制。当执行复制操作时，应用程序通常会同时向剪贴板写入纯文本、HTML、RTF等多种格式的数据。Markdown编辑器（如Typora）在粘贴时会依据优先级解析这些数据，特别是尝试将结构化的HTML智能转换为对应的Markdown语法。这项技术的价值在于打通了不同信息源（如AI助手输出、网页内容）与标准化文档工具之间的壁垒，能极大提升技术笔记、项目文档的整理效率。在实际应用场景中，针对类似“豆包”这类AI生成

weixin_30731305的博客 476

Data-Structures-and-Algorithm-Analysis-in-Java.pdf

作者: Weiss, Mark A. 出版社: Addison Wesley Data Structures and Algorithm Analysis in Java is an “advanced algorithms” book that fits between traditional CS2 and Algorithms Analysis courses. In the old ACM Curriculum Guidelines, this course was known as CS7. This text is for readers who want to learn good programming and algorithm analysis skills simultaneously so that they can develop such programs with the maximum amo...

前端，从入门到入土

前端，从入门到入土   写在前面，更是写给自己：        2020年11月16日，我发表了我的第一篇博客，主要是为了自己学习，给自己看的一篇博客，希望能坚持下去，记录我学习前端时的点点滴滴，希望不要成为黑历史2333，希望我每次打开我的博客看到这段话时，能保持第一次编程的好奇。        加油！     &nb

qq_40272238的博客 342

华为的C语言编程规范.pdf

华为技术有限公司内部技术规范。本规范制定了编写C语言程序的基本原则、规则和建议。从代码的清晰、简洁、可测试、安全、程序效率、可移植各个方面对C语言编程作出了具体指导。

STM32F407中文手册

STM32f407中文手册 本参考手册面向应用开发人员，提供有关使用 STM32F405xx/07xx、STM32F415xx/17xx、 STM32F42xxx 和 STM32F43xxx 微控制器存储器与外设的完整信息。STM32F405xx/07xx、STM32F415xx/17xx、STM32F42xxx 和 STM32F43xxx 构成一个微 控制器系列，各产品具有不同的存储器大小、封装和外设。有关订购信息以及器件的机械与电气特性，请参见数据手册。有关 ARM Cortex™-M4F 内核的信息，请参见《Cortex™-M4F 技术参考手册》。

【前端】项目中遇到的问题汇总（长期更新）

【长期更新】前端项目中常遇到的问题汇总（vue3+elementPlus+node.js+axios+webpack）

sinat_39394862的博客 1238

React渲染超大的字符串

拆解一下逻辑 👇。

Misnice的博客 453

html常用标签

标签与四个伪类 标签的作用： 1.创建链接 百度 href属性规定连接的目标 开始标签和结束标签之间的文字被作为超级链接来显示 2.链接到同一个页面的不同位置 查看知识点3 知识点 0 这是知识点1的内容...... 知识点 1 这是知识点1的内容...... 知识点 2 这是知识点2的内容...... 知识点 3 这是知识点3的内容...... <a>标签的常用属性 ...

miaomiaojinxin的博客 217

HTML基础之HTML常用标签

PHP程序员雷雪松 2017-02-20 09:00 HTML是一种用来描述网页的标记性语言。学习HTML可能并不难，主要是要记一些HTML标签和标签代表的含义。下面PHP程序员雷雪松根据使用的情况，整理出平时常用的HTML标签。 HTML基础之HTML常用标签-PHP程序员雷雪松的博客 1、最基本的HTML结构 是HTML5声明， 必须是 HTML 文档的第一行，位于 标

u011277123的博客 479

HTML简介

HTTP协议超文本传输协议 用来规定服务端和浏览器之间的数据交互的格式四大特性基于请求响应基于TCP/IP作用于应用层之上的协议无状态不保存用户的信由于HTTP协议是无状态的，所以后续出现了一些专门用来记录用户状态的技术无链接/短链接请求来一次我响应一次，之后我们两个就没有任何链接和关系了长链接：双方建立链接之后默认不断开 websocket请求数据格式请求首行（标识HTTP协议版本，当前请求方式）请求头（一大堆k,v键值对）\r\n（换行，这里的\r\n千万不能省略）

weixin_55136170的博客 361

JavaWeb学习

#前端部分（了解）课程思路、前端要素（Web了解、html、JS、vue、ajax、Element等）传统路线现在课程大纲路线## 前端要素（Web了解、html）HTML语法特点基本标签html标签（span）html标签（a）html标签（video）盒子模型：html标签（div）html标签（表格）html标签（表单）## 前端要素（JS）JS引入方式JS基础语法JS函数JS对象（基础（只关注Array、String、JSON）、BOM、DOM）JS事件监听## 前端要素（Vue）插值表达式Vue常

qq_2634545805的博客 430

web前端常用知识点杂记（不定时更新）

CSS样式穿透、设置最高优先级、首行缩进、删除线、文本溢出可滚动、设置背景图、边框渐变、背景渐变、文字渐变、禁用原生input、button边框、设置input光标颜色、设置透明度、伪类选择器、鼠标样式、HTML、CSS特效、滚动条样式；浏览器窗口大小、监听浏览器窗口变动、双击实现浏览器全屏或者退出全屏、JS生成随机ID、时间处理-Date() 对象、??与||、正则表达式校验手机号、随机数、eval函数、数组去重、JS常用数组、对象、字符串方法及使用示例、Vue相关知识、uniApp相关知识，内容持续更新

廖若星辰-LTY 1662

从数据抓取到前端展示：构建高流量游戏资料站的全栈实战指南

在Web开发领域，数据抓取与聚合是构建动态内容型网站的核心技术。其原理是通过自动化脚本（如Python爬虫）从多个数据源（如新闻网站、社交媒体）高效获取、解析并结构化信息，再经由后端API（如Node.js + Express）处理存储，最终通过现代化前端框架（如React）进行展示。这项技术的价值在于能够快速构建内容实时更新、用户体验良好的垂直信息平台，广泛应用于游戏资讯、行业动态、价格监控等场景。本文以构建类似“GTA6资料站”的项目为例，详细拆解了从环境准备、数据抓取（使用Requests、Beaut

weixin_34121304的博客 392

Python零基础实战：从环境搭建到爬虫与数据分析完整学习路径

Python作为一门通用编程语言，其核心价值在于通过简洁的语法和丰富的库生态，高效解决数据处理与自动化问题。其工作原理基于解释执行，开发者通过编写脚本指令计算机完成特定任务，这使其在数据科学和自动化领域极具技术价值。在应用场景上，Python广泛应用于网络爬虫、数据分析、机器学习及Web开发。其中，环境配置是初学者首要面对的挑战，使用Miniconda等工具进行环境管理能有效隔离依赖。而爬虫技术则通过模拟浏览器请求，从网页中提取结构化数据，是获取外部信息的关键手段。本文聚焦于为新手设计一条从零开始的Pyth

weixin_34221276的博客 325
上一篇： 【前端学习记录】el-dialog弹窗点击确定按钮关闭弹窗时的执行逻辑
下一篇： 【前端学习记录】如何判断固定规律字符串的特定位置的字符是啥
点赞 0
评论 0
书签 书签 3
Note_creek
Note_creek
博客等级 码龄10年 372粉丝 53原创
+ 关注 专栏目录 订阅专栏
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值