【前端学习记录】如何在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

SQL Server2008详细安装步骤（超详细步骤）

https://pan.baidu.com/s/1yvolqfU-AbiuGrIzblA7pA 提取码：lzw81.下载好安装包后解压到除C盘以外的磁盘，避免系统卡顿2.使用管理员身份打开安装程序注意：使用管理员身份打开时，此时如果显示以下画面属于正常现象，下载安装即可。因为.net现在有很多软件都需要，包括SQLSERVER2008，它里面有visual studio都要有net，电脑系统没有的话安装一下好了。3.选择全新安装或向现有安装添加新功能4.点击确定5.出现以下画面之后，输入产品密钥即可（密钥在

m0_67402774的博客 4万+

HTML之常用标签

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

forever_wen的博客 1243

保姆级教程：用ESP32和SPH0645麦克风做个无线录音笔（附Python服务端实时播放）

本文提供了一份详细的ESP32无线录音笔开发指南，涵盖从硬件搭建到Python服务端实时回放的全过程。通过SPH0645麦克风采集高质量音频数据，利用ESP32的I2S接口和WiFi功能实现无线传输，并结合Python服务端实现实时播放和WAV文件保存，适合远程音频监控和创意交互装置开发。

weixin_30700099的博客 642

告别CPU空转！用STC8的SPI+DMA高效驱动上百颗WS2812B灯珠

本文详细解析了如何利用STC8单片机的SPI+DMA外设高效驱动WS2812B全彩灯珠，解决传统软件延时驱动方式在长灯带应用中的性能瓶颈。通过硬件方案设计、数据格式转换和DMA传输配置，实现高达400Hz的刷新率和低于5%的CPU占用率，适用于大规模灯光项目。

weixin_30847939的博客 396

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

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

outstandzhou的专栏 7084

光学设计必知：Ansys Zemax中6种系统孔径类型的适用场景全解析

本文深入解析Ansys Zemax中6种系统孔径类型的适用场景，包括入瞳直径、像方空间F/#、物方空间NA等，帮助光学设计师精准控制光线选择和成像质量。通过实际案例和代码示例，详细讲解各孔径类型的计算原理、参数设置及在显微系统、激光扩束等场景中的优化策略，提升复杂光学系统设计效率。

weixin_29266007的博客 551

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

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

sRhee的博客 9535

经典算法之——解决全排列问题以及详解

回溯”指的是“状态重置”，可以理解为“恢复现场”，是在编码的过程中，是为了节约空间而使用的，而在递归或者深度优先中根据需要的场合来配合回溯法可以进一步对自己的代码进行优化。, n-1, n}，方向都为向左。邻位对换法是全排列生成算法中的其中一种，它的换位是双向的，通过保存数字的“方向性”来快速得到下一个排列。最后以 3 开头的全排列为[3, 1, 2], [3, 2, 1]；以 1 开头的全排列为[1, 2, 3], [1, 3, 2]；以 2 开头的全排列为[2, 1, 3], [2, 3, 1]；

m0_68987535的博客 8794

网表导入virtuoso后发现pg pin忘记connect_pg_net/globalNetConnect怎么办？

数模混合项目中经常需要一些需要到virtuoso去连接的线，比如IO上的pg和一些信号线，除了在pr工作中设置skip route之外还需要做好net的赋值，告诉工具虽然我没在物理上有连接，但是实际上应该连什么net，这部分提现在网表里。在Default Net Name中也填写net name，因为这个net需要做global操作，即在顶层定义这个net，所以需要在net name后加个！打开schematic，删除指定cell pin所接net的label。

m0_61544122的博客 969

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

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

hope2019的博客 1296

【YOLO11改进 - C3k2融合】C3k2融合DWRSeg二次创新C3k2_DWR：扩张式残差分割网络，提高特征提取效率和多尺度信息获取能力，助力小目标检测

【YOLO11改进 - C3k2融合】C3k2DWRSeg二次创新C3k2_DWR：扩张式残差分割网络，提高特征提取效率和多尺度信息获取能力，助力小目标检测

专注于图像领域，主要研究内容包括计算机视觉和深度学习，特别是在图像分类、目标检测和图像生成等方面有深入的研究和实践经验。 1054

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

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

m0_62458145的博客 578

5.4 GTT BO的内存分配分析

本文分析了AMD GPU驱动中的GTT技术实现。GTT作为GPU页表，负责管理主机内存与GPU虚拟地址的映射，支持大容量内存访问和统一寻址。文章详细介绍了GTT的核心数据结构amdgpu_gtt_mgr、初始化流程，以及BO(Buffer Object)创建时GTT区间的分配与释放机制。GTT管理通过TTM框架实现分层设计，提供内存统计、兼容性检查等接口，并支持动态迁移、多进程隔离等高级特性。该机制为AMD GPU提供了高效灵活的内存管理基础。

图形/计算GPU的驱动与虚拟化技术分享园地 3735

VB摄像头监控

该VB模块可对摄像头捕获的画面进行录像等，可在创建的窗口进行控制

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

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

weixin_30731305的博客 476

锂电池充电器电路设计 里面有电路

锂电池充电器电路设计 里面有电路 3.7V升压到5V电路设计。

前端，从入门到入土

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

qq_40272238的博客 342

pscad IEEE标准系统搭建说明

pscad IEEE标准系统搭建说明，包含典型的IEEE 9节点、14节点、30节点、39节点和118节点系统。内含标准测试系统的原始数据和潮流结果。

ET2012新版免狗免安装绿色软件

ET2012新版免狗免安祖昂绿色软件。，新界面，新视觉，

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

【长期更新】前端项目中常遇到的问题汇总（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、付费专栏及课程。

余额充值