chrome pre 自动换行
问题引出
当我想要使用chrome的打印功能生成一份关于md的pdf版本的时候发现有的代码块没有自动换行,生成的PDF没有自动换行,导致部分信息无法阅读
处理方式
- 把有自动换行的部分处理一下,在md文档中换行,(难定位-在md原始文件根本看不出来那个是会产生滚动条,代码块多的话操作难)
- 修改pre的样式,让自动换行
目前采用方式2,看看如何操作
- 第一种方式
- 首先定位元素,F12打开开发者工具
看到pre
的样式如下图,这个很有意思user agent stylesheet
,我猜是浏览器默认的吧;添加一个置换的样式,点击图中 2 的位置的+
- 添加换行的样式,两种改法第一种修改如图所示;
-
第二种在通过js修改,控制台输入这行代码
var style1 = document.createElement('style');style1.innerHTML = 'pre{white-space:pre-wrap;}';document.head.appendChild(style1);
-
看看效果
user agent stylesheet
ser agent stylesheet 官网说明
类似默认样式,用户可以写样式顶掉
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」