中英文混版时的间距突然变大怎么通过CSS解决?

简介: 中英文混版时的间距突然变大怎么通过CSS解决?

在使用Md2ll对Markdown编辑后的文章进行微信公众号排版时,突然遇到了一个问题——中英文混版时的间距突然变大,就像下面这样:




我是研究了两三个小时没找到好的办法,在青苗科技工作室问了小伙伴小龙才知道问题的根源,可通过一行CSS代码word-break:break-all;解决问题。针对Md2ll的自定义排版,可修改以下部分样式:


code /*行内代码*/
{
    word-wrap: break-word;
  word-break:break-all;
    padding: 2px 4px;
    border-radius: 4px;
    margin:0 2px;
    color:#e96900;
    background:#f8f8f8;
  line-height: 15px; 
   font-size: 14px; 
   font-weight:normal;
   word-spacing:-3px; 
   letter-spacing:0px; 
}


修正后的效果如下图(正常了):


image.png

相关文章
|
JavaScript
JS 如何动态获取本地文件夹中的所有图片
JS 如何动态获取本地文件夹中的所有图片
1106 0
Threejs实现相机视角切换,平滑过渡,点击模型切换到查看模型视角
Threejs实现相机视角切换,平滑过渡,点击模型切换到查看模型视角
2791 0
Threejs实现相机视角切换,平滑过渡,点击模型切换到查看模型视角
|
JavaScript API C++
Vue项目中的文件/文件夹命名规范
文件或文件夹的命名遵循以下原则: index.js 或者 index.vue,统一使用小写字母开头的(kebab-case)命名规范 属于组件或类的,统一使用大写字母开头的(PascalCase)命名规范 其他非组件或类的,统一使用小写字母开头的(kebab-case)命名规范 1.
18267 0
|
对象存储 CDN
阿里云OSS如何把才能把图片最小最快的加载?
阿里云OSS如何把才能把图片最小最快的加载?
2501 0
|
API
【threejs教程】让你的场景五颜绿色:纹理贴图与环境贴图
【8月更文挑战第6天】【threejs教程】让你的场景五颜绿色:纹理贴图与环境贴图
830 11
|
Web App开发
成功解决Chrome浏览器 控制台下看不到接口信息的问题
这篇文章提供了解决Chrome浏览器控制台不显示接口信息问题的方法,包括检查过滤设置和确保“保留日志”开关已打开。
成功解决Chrome浏览器 控制台下看不到接口信息的问题
|
JavaScript
JS设置键盘快捷键、组合键
JS设置键盘快捷键、组合键
|
存储 JavaScript API
Vue3——pinia部分(小满版本)(一)
Vue3——pinia部分(小满版本)
230 0
|
开发工具 git C++
【Git】stash 仅贮存指定文件的修改
如何使用 git stash 贮存单个或多个文件
4948 0
|
前端开发
前端学习案例-Array.from方法详解
前端学习案例-Array.from方法详解
268 0