前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >解决WordPress 文章英文单词溢出/单词断词等问题

解决WordPress 文章英文单词溢出/单词断词等问题

原创
作者头像
小唐同学.
发布2022-02-22 10:34:58
1.7K0
发布2022-02-22 10:34:58
举报
文章被收录于专栏:CMS建站教程CMS建站教程

很多时候,WordPress中文主题都可能在开发的时候,漏掉了对文章对英文的排版优化,出现几种情况:

  1. 长英文、长链接,溢出超过显示范围,没有换行
  2. 英文单词换行时,在单词中断开了

解决以上两个问题呢,分别有 2 套方案。

自动换行

代码语言:javascript
复制
word-wrap: break-word; 
word-break: normal;

英文单词不拆词

代码语言:javascript
复制
word-break: keep-all;  //只能在半角空格或连字符处换行。
word-wrap: break-word; //当单词太长时,先尝试换行,换行后还是太长,单词内还可以换行。
white-space: pre-wrap; //保留所有的空格和回车,但是允许折行,注意:出现大量空白时,可不加。

一般来说,需要在属于文章内容的样式表中,增加以下的 css 样式,即可解决。

英文单词两端对齐、单词不拆词换行

代码语言:javascript
复制
word-break: keep-all; 
word-wrap: break-word; 
white-space: pre-wrap;
text-align: justify;

举个栗子

如果你是使用苏醒同款主题:PandaPRO 主题,或者恰好有安装积木插件,那么就可以在不更改主题文件代码的前提下,完成改造。

首先,找到文章内容外层 p 的样式标签:.post-content p, .post-content figure 在积木优化设置中,找到自定义模块,在头部自定义代码中插入样式代码,如下图:

代码语言:javascript
复制
.post-content p,
.post-content figure {
    word-break: keep-all;
    word-wrap: break-word;
    white-space: pre-wrap;
}
解决WordPress 文章英文单词溢出/单词断词等问题-苏醒
解决WordPress 文章英文单词溢出/单词断词等问题-苏醒

保存,返回网站文章页,清除浏览器缓存后,刷新网站,看看,是不是凑效了。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 自动换行
  • 英文单词不拆词
  • 英文单词两端对齐、单词不拆词换行
  • 举个栗子
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档