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

微带线，带状线和接地共面波导的区别

微带线，带状线和接地共面波导的区别

sky_ying的博客 3万+

HTML之常用标签

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

forever_wen的博客 1243

保姆级教程：在Windows/Mac上从零部署清华Kronos股票预测模型（含Qlib数据更新避坑指南）

本文提供了一份详细的指南，帮助用户在Windows和Mac系统上从零部署清华Kronos股票预测模型，包括环境配置、模型权重获取、Qlib数据更新避坑等关键步骤。特别针对国内用户遇到的网络问题和数据更新不及时提供了解决方案，适合量化投资和金融科技爱好者快速上手。

weixin_29053577的博客 623

python爬虫项目（六十八）：爬取电商平台用户购买历史数据，分析消费行为

本文详细介绍了如何爬取电商平台用户购买历史数据，并分析其消费行为。通过爬虫技术、数据存储、分析和可视化等步骤，可以深入了解消费者的行为特征。未来，随着数据分析技术的不断发展，利用人工智能和机器学习方法对消费行为进行更深层次的分析，将成为电商平台提升竞争力的重要手段。

斌擎科技 2768

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

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

outstandzhou的专栏 7084

Python爬虫实战：汽车之家车型参数与口碑数据抓取分析

在当今信息爆炸的时代，购车决策已从传统的4S店咨询转变为数据驱动的智能化过程。汽车之家作为国内领先的汽车信息平台，汇聚了海量车型参数、车主口碑和专业评测数据。本文将详细介绍如何使用Python最新爬虫技术构建一个高效、稳定的汽车数据采集系统，通过多维度数据分析辅助用户做出更明智的购车决策。本项目将采用异步爬虫、智能反爬绕过、数据清洗与分析等现代化技术栈，完整实现从数据采集到可视化分析的全流程。本文详细介绍了如何使用Python最新技术构建一个功能完整的汽车之家数据爬虫系统。

2201_76125261的博客 1488

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

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

sRhee的博客 9535

FATFS挂载多个存储设备(2)：功能配置及功能测试

本文介绍了基于FATFS文件系统实现多存储设备挂载的方法，包含底层设备驱动函数编写、功能配置、功能测试。

kevin1499的博客 2585

46、搭建与配置FTP服务器全攻略

本文详细介绍了如何搭建与配置FTP服务器，以vsftpd为例，涵盖了FTP基础概念、安装步骤、服务控制、安全设置、用户权限管理、文件上传支持、互联网共享配置、客户端使用以及常见问题解决等内容。旨在帮助用户高效、安全地实现文件共享与管理。

time3的博客 88

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

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

hope2019的博客 1296

面向可扩展的 ABAP CDS：EXTEND VIEW 全面实战与工程化指引

摘要： 本文深入讲解ABAP CDS的EXTEND VIEW功能，帮助开发者在标准或自建模型上安全扩展字段与关联。核心内容包括： 作用：避免直接修改标准CDS，通过轻量扩展添加业务字段和关联，降低维护风险。 语法要点：需定义CDS扩展实体名和Dictionary Append View名，支持添加普通字段、关联，但不允许聚合或修改原有结构。 限制：不能扩展含聚合、UNION的视图，且扩展字段需避免命名冲突。 工程实践：建议使用客户命名空间，区分结构扩展与元数据扩展，并注意功能性变更需通过其他方式实现。 示例

2007 年 ~ 2025 年，深耕 SAP 技术 18 年 394

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

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

m0_62458145的博客 578

推荐系统（一）概述

在互联网领域，推荐系统（Recommendation Systems）的应用非常广泛。在音视频方面，如抖音、快手、哔哩等；在电商平台方面，如京东、淘宝、拼多多等。推荐有助于帮助用户快速发现潜在感兴趣的内容（音视频、商品、新闻等信息流），从而提升用户体验，同时有助于提升商业效率。从本文开始，笔者将结合自身在信息流推荐领域的经验，通过系列文章对推荐系统展开介绍。

Jin_Kwok的博客 6084

jdk-8u144-linux-x64.tar.gz.

该资源为搭建Linux系统Java环境用，资源的后缀为tar.gz格式的压缩包

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

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

weixin_30731305的博客 476

廖雪峰Python教程[完整版]

廖雪峰的python教程整理的，已经排好版了，而且还是完整的，适合小白

前端，从入门到入土

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

qq_40272238的博客 342

NTscan扫描工具

ntscan是一个扫描器，可以扫描没有密码和弱密码的共享，先到配置文件中填写猜测的用户名和密码，扫描过程中右侧出现的是扫描日志。

TMS_WebGMaps_1.9.8.0_Full_Source

TMS_WebGMaps_1.9.8.0_Full_Source 全源码 delphi cbuilder

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

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

余额充值