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

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

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
港口IT技术

一些网络相关信息集锦

2012-11-22 0:23:24

港口IT技术

推荐7个免费在线设计logo的网站

2012-12-6 21:53:46

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索