CSS解决wordpress文章中链接过长的问题

在某些wordpress主题下发表文章,如果文章内部带有比较长的链接的话,在PC上可能没啥问题,但是用手机浏览的话这些过长的链接就有可能超出屏幕宽度。原因是,英文的链接(含纯文本链接和超文本链接)不会自动换行。

解决这个问题很简单,在主题的CSS文件中添加如下定义:

a {
	word-wrap: break-word;
}

这是对超文本链接宽度做了定义,让其达到上级容器的宽度限制的时候,自动换行。

在对文章内容部分做如下定义:

.page-content {
       word-wrap: break-word;
}

这就对纯文本连接也做了宽度定义,让其达到上级容器的宽度限制的时候,也自动换行。

最后,用手机浏览器打开网页刷新一下再看看,是不是链接内容超出屏幕的问题已经解决了?

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注