一、来自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,缩小时会保持长宽比的，请放心使用。
