首页 > 其他分享 >chrome pre 自动换行

chrome pre 自动换行

时间:2022-08-16 18:16:09浏览次数:106  
标签:pre style1 chrome 换行 自动 样式

问题引出

当我想要使用chrome的打印功能生成一份关于md的pdf版本的时候发现有的代码块没有自动换行,生成的PDF没有自动换行,导致部分信息无法阅读
has_scroll

has_scroll2

处理方式

  • 把有自动换行的部分处理一下,在md文档中换行,(难定位-在md原始文件根本看不出来那个是会产生滚动条,代码块多的话操作难)
  • 修改pre的样式,让自动换行

目前采用方式2,看看如何操作

  1. 首先定位元素,F12打开开发者工具
    看到 pre 的样式如下图,这个很有意思user agent stylesheet,我猜是浏览器默认的吧;添加一个置换的样式,点击图中 2 的位置的 +
    chrome_style

  2. 添加换行的样式,两种改法第一种修改如图所示;第二种在通过js修改,控制台输入这行代码var style1 = document.createElement('style');style1.innerHTML = 'pre{white-space:pre-wrap;}';document.head.appendChild(style1);
    chrome_style_modify

  3. 看看效果
    no_scroll
    no_scroll2

user agent stylesheet

ser agent stylesheet 官网说明
类似默认样式,用户可以写样式顶掉

标签:pre,style1,chrome,换行,自动,样式
From: https://www.cnblogs.com/fhlsteven/p/16592435.html

相关文章

  • chrome设置下载文件后不打开
    chrome浏览器下载文件总会自动打开,次次都要手动关闭,如何设置?......
  • Express 项目,res.cookie() 设置 Cookie 无法被保存在浏览器的 Application 中
    res.cookie()给客户端响应头封装的Cookie无法被保存在客户端浏览器的Application中,只能在Set-Cookie中看到有这个值:经过多方的搜索和查询,前后端分离项目中,存在跨......
  • Express 使用 Cookie
    在使用Cookie之前,需要给Express加载中间件,cookie-parser:npmicookie-parserExpress使用中间件:importexpressfrom"express";importcookieParserfrom"cooki......
  • 创建第一个 Cypress 应用后使用命令行 npx Cypress open 报错的原因分析
    大多数测试工具(如Selenium)通过在浏览器外部运行并通过网络执行远程命令来运行。Cypress正好相反。Cypress在与Web应用程序相同的运行循环(runloop)中执行。Cypress......
  • Chrome 50放弃Windows和OS X
    Chrome浏览器正式为Windows、Linux和Mac系统发布了Chrome50稳定版。如果你还记得Google去年11月曾宣布要在今年4月停止对老旧操作系统的支持,那么此次Chrome50不再支......
  • Cypress自动化测试框架安装与部署
    安装与部署一、npm方式安装:1)安装Node.js   在Node.js官方网站https://nodejs.org/en/直接下载Node.js并双击安装2)设置环境变量,把node.exe所在的目录加入到PATH环境......
  • ORACLE 回车换行符
    定义制表符chr(9)换行符chr(10)回车符chr(13)查询SELECT'AA'||chr(9)||'BB'||chr(10)||'CC'||chr(13)||'DD'asAFROMDUAL;替换SELECT'AA......
  • 关于CSS文字排版换行
    css效果属性和属性值中文内容不可换行(标头中文不换行)word-break:kepp-all中文标点可以换行(取消标点的避头避尾)line-break:anywhere连续破折号可换行wo......
  • .NET 7 发布的最后一个预览版Preview 7, 下个月发布RC
    微软在2022年8月9日发布了.NET7Preview7[1],这是它在11月10日RTM之前进入发布候选阶段之前的最后预览版。预览版7已在VisualStudio17.4预览版1中进行了测试,......
  • Node.js + Express + Knex 开发 API 接口
    安装依赖包npmiexpressknexmysql2这是Knex官方文档地址:Knex.js-SQLquerybuilder。搭建接口config.js新建一个config.js文件,专门写knex的配置:importk......