苏醒 苏醒
  • 首页
  • WP主题
  • WP插件
  • WP教程
  • 是日一记
  • 博客
    • 留言
    • 唠叨
    • 盆友圈
    • 栏目推荐

suxing

管理员
每天清晨有多少双眼睛睁开,有多少人的意识苏醒过来,便有多少个世界。
IP归属地: 广东
文章
214
评论
236
suxing
2019-12-20 12:39:34 广东

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

文章字数:720
阅读时间: 2 分钟
智能摘要 DeepSeek
本文指出WordPress中文主题开发中常出现的排版问题:长英文、长链接溢出,英文单词断行。解决方案包括:1)在文章内容样式表中增加`word-wrap: break-word;`和`white-space: pre-wrap;`;2)通过积木插件快速实现优化,设置`word-break: keep-all;`、`word-wrap: break-word;`、`white-space: pre-wrap;`并调整文本对齐方式。

很多时候,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 教程
等 人表示很赞
4,112
1

评论 (1)

  • Dami

    有点溜

    6 年前 未知地区 回复 0
suxing
suxing
2019-04-02 23:31:50 广东

推荐 WordPress插件:Easy WP SMTP 和 Social Warfare 漏洞被利用,近 20 万站点还没打补丁

智能摘要 DeepSeek 近日,两个广受欢迎的WordPress插件(Easy WP SMTP和Social Warfare)被曝存在严重漏洞,允许攻击者创 ...
  • WordPress 教程
  • 博客
2,951 0
suxing
suxing
2015-05-13 16:20:07 广东

推荐 WDCP面板升级PHP5.3,安装Zend Guard Loader组件教程

智能摘要 DeepSeek 默认安装的WDCP管理面板PHP版本为5.2.17,但购买苏醒付费主题需升级至PHP5.3或5.4。升级步骤包括:1)运行PHP升级脚本至PHP5.3.17;2)升级eAccelerator插件;3)安装Ze ...
  • WordPress 教程
  • PHP版本升级
  • WDCP教程
  • WDCP面板升级PHP
  • 安装zend组件
10,500 6
suxing
suxing
2018-11-22 16:18:22 广东

推荐 新手如何使用WordPress建立自己的博客&网站

智能摘要 DeepSeek 搭建WordPress博客的第一步是选择域名和服务器。首先购买域名并完成备案,然后根据需求选择阿里云、腾讯云等服务商的服务器,并按照入门型或基础型配置(CPU:1核、内存:1G/2G、带宽:1M/2M、操作系 ...
  • WordPress 教程
3,282 1
suxing
suxing
2014-10-02 16:21:49 广东

推荐 在WordPress中插入表格

智能摘要 DeepSeek 在WordPress中使用vfilm主题时,插入表格无法显示的问题可以通过以下步骤解决: 1. 在主题的`style.css`中添加表框CSS样式。 2. 使用Word编辑表格并复制粘贴到文章中,需在“可视化 ...
  • WordPress 教程
  • 在WordPress中插入表格
  • 文章插入表格
17,065 5
suxing
suxing
2024-02-02 0:28:08 广东

推荐 WordPress 上传主题或者插件时提示错误Incompatible Archive 存档不兼容的解决办法

智能摘要 DeepSeek 在WordPress 6.4.3中上传主题或插件时,可能遇到“不兼容的存档”错误,通常是由于Mac压缩的.zip文件格式问题。解决 ...
  • WordPress 教程
4,577 0

我用的 WordPress 主题

2021 年单栏 WordPress 主题

Copyright © 2012-2025 苏醒. All rights reserved. Designed by nicetheme.
  • 首页
  • 主题
  • 教程
  • 博客
  • 唠叨
  • 留言