注册 登录
  • 欢迎访问港机技术在线,港口设备维护管理、维修经验交流文章分享给大家!访问地址
  • 网站陆续收藏互联网上关于港口岸边桥式起重机(岸桥)、门机、卸船机、
  • 轮胎吊、斗轮机、堆取料机、正面吊、堆高机等各类机电设备维修经验文章,敬请关注!
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏港机技术博客吧

转载:【两种方法】wordpress文章内容自动换行与文章图片溢出的解决办法

港口IT技术 小编 4318次浏览 0个评论 扫描二维码

一、来自http://www.guansoft.com/wordpress-article-wrap-the-article-picture-overflow.html

 

最近用了一个wordpress主题。发布文章时,文章内容不能自动换行和比较大的图片都会超过文章内容区域,显示到了侧边栏部分。非常影响用户体验。

于是百度”wordpress文章自动换行“等关键词,找了不少解决问题的方法和代码。有一篇文章介绍的是往 style.css 中添加

/* content styles */
#content { white-space: nowrap; text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden; }

这行代码。但本人添加后,只能把原来超出边界的文章内容和图片隐藏起来(这种效果更影响阅读)。并没有实现文章内容自动换行。也许稍微改动一下就可以了,可是本人是代码盲,不会改。

只好继续搜索百度,百度搜完搜谷歌,找到很多文章,介绍最多的是往 style.css 中添加

pre {
white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
word-wrap: break-word;
}

本人添加完这个代码后,压根儿就没任何作用。还有一些其它办法,也都一一试过,最终还是没能解决问题。

于是只好把wordpress自动换行的问题先放一边,先解决wordpress图片溢出的问题吧!

于是百度”wordpress文章图片溢出“。这次非常顺利,百度第一条就成功了。而且同时解决了文章内容自动换行的问题。

解决问题的办法就是往 style.css 中添加下面的代码就可以了。

img,a img{border:none;max-width:100%;width:e?xpression(document.body.clientWidth>700?"700px":"auto");overflow:hidden;}

由于我的主题文章内容区域比较小,上面代码中的两个700要改成了600才行。这个数字根据你主题的文章内容区域的大小来定。

由于解决这个问题的过程中,走了不少弯路,浪费了不少时间。所以在这里写了这篇文章,希望有遇到同样问题的朋友,搜索到这篇文章,少浪费点时间。

2012.03.21补充:

不好意思,原以为已经解决问题了,现在才发现,在”360极速浏览器”和”百度浏览器”中是没问题的。

可是换成”IE浏览器”和”火狐浏览器”问题依旧。继续寻找解决方法。

这次谷歌搜索”wordpress css 自动换行” 这个关键词,很快就找到完美的解决方法了。

二、来自http://www.yanshare.com/wordpress-article-image-is-too-large-narrow/

很多时候我们要在wordpress内插入很我图片,但是很多时候图片大小可能会大于我们的文章页面大小,这时就可能需要我们去手动修改代码了,但是这样是不是太麻烦呢,有没有简单的办法呢?答案是肯定的,下面我们来完成这一功能。
一、首先找到我们安装的主题的的文章页面文件,查看该PHP文件的文章内容加载的代码,一般文章内容是显示在一个DIV内的,然后通过一个函数调用的,然后看该DIV上我们只要加如下样式即可。

max-width:600px;
width: expression(this.width > 600 ? "600px" : true);

这里的
max-width:600是指文章页面最大的图片宽度为600px
width: expression(this.width > 600 ? "600px" : true)这句代码的意思是指当图片的大小大于600时,将图片的宽度缩小到600px,缩小时会保持长宽比的,请放心使用。


转载本站文章请注明:文章来源于http://ippdd.com转载:【两种方法】wordpress文章内容自动换行与文章图片溢出的解决办法
喜欢 (0)
[wangzhe12588@163.com]
分享 (0)

您必须 登录 才能发表评论!