解决WordPress 文章英文单词溢出/单词断词等问题(长英文单词字符不能自动断句的解决办法)

小初seo 2021年5月4日08:56:16网站建设评论363 次浏览722字阅读2分24秒

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

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

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

自动换行

word-wrap: break-word; 
word-break: normal;

英文单词不拆词

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

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

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

word-break: keep-all; 
word-wrap: break-word; 
white-space: pre-wrap;
text-align: justify;

举个栗子

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

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

.post-content p,
.post-content figure {
    word-break: keep-all;
    word-wrap: break-word;
    white-space: pre-wrap;
}

解决WordPress 文章英文单词溢出/单词断词等问题(长英文单词字符不能自动断句的解决办法)

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

小初seo
  • 本文由 发表于 2021年5月4日08:56:16
  • 转载请务必保留本文链接:https://www.pkak.cn/web/3918.html
网站建设

服务器是什么(网络服务器是什么东西)

网络服务器是什么东西 服务器基本概念 按照百度百科解释,所谓服务器 ,指的是一种管理资源并为用户提供服务的计算机设备。从广义上来讲,服务器是指网络中能为其它机器提供某些服务的计算机系统;从狭义上来说,...
网站建设

建个微网站多少钱 怎么建立微网站

一般的中小微企业官方网站2000-3000元。如果是模板网站的话,一般的1000元左右,差一些的几百元的都有。 一个中小微企业网站的费用主要由以下三个部分构成: 1、域名、空间 域名的价格一般是固定的...
网站建设

三合一网站建设多少钱(一站式网站建设)

企业网站现在都要求三端合一,所谓三端就是指:电脑端、手机端、pad端。那么有人问只做一端可以不,答案是可以的,但这这样就会损失掉用其他端的客户,也会对企业的映像打折扣。 企业网站的制作方法有两类,分别...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: