• 问答社区
  • 代码转换
  • 友情链接
  • 关注我们
    • 关注微信
    • 商店
Hi, 请登录   我要注册   找回密码
小林博客-生活记录 原创文章 技术分享 源码分享 linux技巧  FRP 引流 Ai IT SEO资讯分享等!小林博客
欢迎光临
我们一直在努力
  • 首页
  • 热门活动
    • 活动资源
  • 技术教程
    • Linux使用技巧
    • CentOS
    • Ubuntu
    • Debian
    • Fedora
    • FreeBSD
    • MySQL
    • Docker
  • 资源分享
    • seo+互联网
    • 安全工具
    • 精品软件
  • 网站源码
    • WordPress
      • 主题
    • Z-Blog
    • emlog
    • dedecms
  • 值得一看
    • 活动线报
    • 网赚
  • 系统下载
    • Windows 11
    • Windows10
    • Windows8
    • Windows7
    • 计算机相关
    • 微软原版系统

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

2022-04-27 分类:资讯 阅读(115) 评论(0) 扫描二维码 隐藏侧边显示侧边

很多时候,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 文章英文单词溢出/单词断词等问题

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

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

 6

赞微海报分享

AD:【小林博客】本文内容由互联网用户自发贡献,该文观点仅代表作者本人。不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至xiaolinbk@qq.com 举报,一经查实,本站将立刻删除。原文转载: 原文出处:

  • 0 个人已赞
 赞一个 收藏 (0) 打赏

您可以选择一种方式赞助本站

支付宝扫一扫赞助

微信钱包扫描赞助

除特别注明外,本站所有文章均基于CC-BY-NC-SA 4.0原创,转载请注明出处。
文章名称:《WordPress 文章英文单词溢出/单词断词等问题》
文章链接:https://www.xlin.cn/xlbk/18907.html。
分享到: 更多 (0)
admin
关 注
  • 上一篇:WordPress 小Tips:打开自定义字段,修改网站文章参数(评论数/点赞数)
  • 下一篇:WordPress插件smartideo支持插入B站视频
  • 相关推荐

    • WordPress 到自定义代码:不同技术水平的建站方案
    • 从零开始,用WordPress轻松打造你的梦想网站:无需代码,人人都是创作者!
    • WordPress 6.8.3版本维护和安全更新
    • WordPress发布WordPress 6.9开发周期
    • 适用于WordPress的Robots协议规则
    • WordPress新建页面没有评论框
    • WordPress 另一更新正在进行(无法更新完美解决办法)
    • WordPress的腾讯云COS插件对接储存桶教程

    热门文章

    • 如何在 Windows 中更改最大处理器频率
      如何在 Windows 中更改最大处理器频率计算机相关
    • 4DDiG DLL Fixer 1.0.7.3 免费的DLL DirectX等组件修复工具!抵制不良收费软件!
      4DDiG DLL Fixer 1.0.7.3 免费的DLL DirectX等组件修复工具!抵制不良收费软件!计算机相关
    • 如何在 Windows 10 中添加或删除 ReadyBoost 选项卡
      如何在 Windows 10 中添加或删除 ReadyBoost 选项卡win10
    • Win10打开局域网出现 找不到网络路径 错误(0x80070035)解决方法
      Win10打开局域网出现 找不到网络路径 错误(0x80070035)解决方法win10

    评论 抢沙发

    取消

    热门文章

    • 进销存APP管理系统,适合绝大多数行业,傻瓜式安装2022-04-28评论(9)
    • Hyper-V虚拟机无法启动提示Start Pxe over IPv4解决方法2020-12-27评论(9)
    • 联想打印机M7216清零步骤2021-02-15评论(6)
    • ToDesk 极致流畅的远程协助软件2021-12-26评论(4)
    • zibll主题v6.2最新官方破解版 开心版源码下载 wordpress主题2022-04-19评论(4)
    • WordPress主题-YusiPro v1.5 完全解密版2020-12-26评论(3)

    最新评论

    • 3年前 (2022-07-18)说:
      无法安装这个包。 主题缺少style.css样式表。
    • 4年前 (2022-06-26)说:
      不错的进销存管理系统,源码给我发一份吧,谢谢! 邮箱:adata@189.cn
    • 4年前 (2022-06-13)说:
      Erphpdown v11.3 这个插件怎么安装使用,我这边试了 没反应
    • doudoudzj 4年前 (2022-06-07)说:
      您好,可否共享一份代码,非常感谢
    • 4年前 (2022-05-30)说:
      支持WP5.9或6.0吗?
    • 4年前 (2022-05-27)说:
      typecho1.2目录里没有这个文件

    Apache Aria2 Caddy CentOS7 cloudflare Deepin DNS DNSmasq Emlog frp Git服务器 HTTPS IPV6 Linux macOS Memcached NAT Nginx nps OneDrive openwrt Redis Samba SEO ssh ssl swap U盘 vmware vps WebP WIFI Win7 Win10 Windows Windows10 Windows10 WordPress 向日葵 宝塔 微信 抖音 树莓派 蓝屏 防火墙

    友情链接:
    • KMS服务器
    • hao123导航
    • Dism++
    • Linux性能跑分
    • Stephen's Blog
    • 晓鹄网
    • 腾龙工作室
    • 泽楠云资源博客
    • 九霄子
    • FinalShell
    • chrome插件
    • 提速啦
    • 新睿博客网
    • 蓝立网
    • 600导航
    • Dism++
    • CPU天梯图
    • OHTTPS
    桂ICP备18003883号-6 如果有侵权之处请第一时间联系我们删除。敬请谅解! 投稿等事物联系邮箱xiaolinbk@qq.com 或 QQ1278766671 - 举报违法信息

    360安全检测 凭安信用认证 又拍云 腾讯云安全认证

    © 2020-2025 小林博客   网站地图

    切换注册

    登录

    忘记密码 ?

    切换登录

    注册

    • QQ咨询
      QQ咨询
    • 微信咨询
      关注微信
    • 回顶
      回顶部