CSS解决WordPress 文章英文单词断词影响排版美观的问题

虫子君
虫子君
虫子君
652
文章
278
评论
2020年3月21日00:35:39 评论 175 878字阅读2分55秒

有时候在使用WordPress博客写文章的时候,经常遇到一个问题,就是当我们在后台写文章的时候,总是不由自主的会写几个英文单词,又或者这些内容只能够使用英文描述的时候,来不得以填写了一串英文,结果闹得个文章中的文本无法两端对齐,或者直接将一个单词砍成两节。虫子君这样吹毛求疵的用户不能忍受,所以教大家一个解决WordPress 文章英文单词断词的办法。

CSS解决WordPress 文章英文单词断词影响排版美观的问题

WordPress 文章英文单词

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

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

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

英文单词不拆词

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

一般来说,需要在属于文章内容的样式表中,增加以下的 css 样式,即可解决。如果您不知道将代码粘贴到哪里,那就直接加到style.css文件当中即可。

具体的写法

比如您实在不知道您文章内容中的文本是使用了什么class值,那简单一点写法,不一定适用所有用户。

p{
    word-break: keep-all;
    word-wrap: break-word;
    white-space: pre-wrap;
}
//p是你文章中的段落标签

如果出现失效,那么可以鼠标右键选中一段文字后,直接右键审查元素,可以看到对应的class值,这时候将这些值,替换“p”标签即可。如图;

CSS解决WordPress 文章英文单词断词影响排版美观的问题

查找网页中文本元素的类名

继续阅读
历史上的今天
三月
21
  • 欢迎来“给我投稿”网友会因为你的帮助而感激。
  • 文章链接:https://chonzi.com/9435.html

您必须才能发表评论!