2014年6月

在使用#putty#对linux服务器进行命令操作时,像我这种英语不怎么滴的同学还是有相当一部分的。这种情况下对于系统返回的一些信息往往看不懂。这时候,如果显示是中文,那是多么美好的一件事啊。经过不懈努力,终于找到解决方法了。

一、修改Linux服务器系统设置

1.关闭Linux的防火墙

#iptables -F  #iptables save

2.使用winscp软件编辑“/etc/sysconfig/i18n”文件,

将LANG=en_US.UTF-8改为LANG=zh_CN.UTF-8  SUPPORT=en_US.UTF-8….也作相同的改动

3.接下来执行命令:

#. /etc/sysconfig/i18n  #locale

如果看到显示了LANG=zh_CN.UTF-8等信息,表明改动成功。

- 阅读剩余部分 -

在#网页制作#中,css样式的书写完全是不可避免的。今天在修改一个页面,已经用了white-space: pre-wrap样式,但文本在IE6、IE7始终不实现自动换行。经验不懈的百度+谷歌,哥终于找到答案了!!

white-space 属性

CSS 中的 white-space 属性用于设置文本空白符的处理规则,这其中包括:是否合并空白符、是否保留换行符、是否允许自动换行。各属性值的不同行为如下表所示:

white-space 属性值一览表

属性值空白符换行符自动换行最早出现于
normal合并忽略允许CSS 1
nowrap合并忽略不允许CSS 1
pre保留保留不允许CSS 1
pre-wrap保留保留允许CSS 2.1
pre-line合并保留允许CSS 2.1

(注:在 CSS1/2 下,white-space 属性只可应用于块级元素;在 CSS 2.1 下,可应用于所有元素。)

如果我们需要某个容器元素具有类似

<pre>

 元素的空白符处理行为,则为它设置 {white-space: pre;} 样式即可。

对 pre-wrap 的需求

我们先解释一下上述表格中的“自动换行”行为,它是指某元素内部的文本流按照文本方向排版,当文本流遇到限制其继续延伸的边界时,是否换行。“不允许自动换行”则意味着文本流会溢出该元素。

因此,{white-space: pre;} 样式有时候并不能满足我们的期望。比如,在某些不需要特别严谨的场合,或者排版某些对换行不敏感的代码片断(比如 HTML 或 CSS)的时候,我们不希望代码片段中的一行长代码令它的容器元素产生水平滚动条,因为那样不便阅读。我们希望在这种情况下,长代码自动换行就好。

杯具的 IE6 和 IE7

再来看一下上面的表格,我们发现 pre-wrap 是从 CSS 2.1 才开始引入的属性值。然而,目前网民使用最为广泛的 IE6 和 IE7 浏览器都是基于 CSS1 和部分 CSS2 的,它们完全不能识别 pre-wrap,当然也无法实现 pre-wrap 的空白符处理行为。

在 IE6,7 下变通实现 pre-wrap

经常反复测试,我们找到了在 IE6,7 下变通实现 pre-wrap 效果的方法。

比如,有如下 HTML 结构:


这是一段多行文本数据其中某些文本行会非常长从而溢出容器比如你现在看到的这行行与行之间有换行符但没有使用 HTML 换行标签

我们需要将 .content 元素设置为 pre-wrap 样式,理想情况下只需要编写如下 CSS 代码就可以了。

.content {  whitewhite-space: pre-wrap;  }

但为了应付 IE6,7,我们需要将上述 CSS 代码修改如下:

.content {  whitewhite-space: pre-wrap;  *whitewhite-space: pre;  *word-wrap: break-word;  }

这样就可以了,我们在各浏览器中实测一下,可以发现我们需要的效果完美实现。

当然,你可能注意到了,我们使用了一点儿 CSS hack。别担心,它们条理清晰并且容易维护,我觉得这可以接受。在面对低能浏览器的时候,我们只能给予它们一些额外关照。

原理

如果你是一个实用主义者,那么文章到这里已经结束了。你可以把代码存下然后走人,或者继续浏览 CSS魔法 的其它文章。如果你是一个充满好奇心的 CSS 学习者,那么我很乐意与你一起来分析一下它的实现原理。

在上面的最终版 CSS 代码中,很显然对于标准浏览器,我们是用正常的{white-space: pre-wrap;}来实现所需效果的。而对于 IE6,7,我们使用了 CSS hack,让它接受额外的样式声明,使用其它方法来实现类似 pre-wrap 的效果。

首先,在 IE6,7 下,{white-space: pre-wrap;} 这条样式声明由于不能识别而被丢弃,于是我们为 .content 另外设置了 {white-space: pre;} 的样式。我们已经很熟悉 pre 了,它的特性与我们想要的 pre-wrap 效果只有一点区别,即 pre 不允许自动换行,也就是说,较长的文本行可能会溢出其容器元素。

因此,接下来,为了让这些较长的文本行自动换行,我们为 .content 元素设置{word-wrap: break-word;}样式(谨慎起见,我们用 CSS hack 将这条声明隔离给 IE6,7;不过即使将它暴露给所有浏览器,它也是无害的)。这条声明负责对 .content 元素内的文本行进行约束,并强制其换行。也就是说,{white-space: pre;} 完成了识别文本换行符的任务,剩下的自动换行的任务交由

{word-wrap: break-word;}

来完成。

回到前面的原理分析,其实我们会发现一个矛盾,

{white-space: pre;}

很倔犟地不愿换行,而

{word-wrap: break-word;}

则要求内部文本自动换行。面对这样的冲突,浏览器如何决断?

在 CSS 中,控制文本换行方式的属性有很多,当发生冲突的时候,某些属性在文本排版中的优先级更高,因而会在冲突中胜出,决定最终的文本样式。很显然,在上面的这起冲突中,

{word-wrap: break-word;}

更加强势,倔犟的文本行最终还是乖乖地换行了。

结语

感谢你看到了这里,希望这篇文章对你有所帮助!

插播 word-wrap 的相关资料

CSS 发展至今经历了多个版本,但它对文本排版的控制仍然不够精确和灵活。于是微软的 IE 浏览器开发了一些私有属性,扩展了 CSS 的文本排版功能,尤其可贵的是,这些扩展属性大多考虑到了非拉丁语系语言的排版规则。由于这些私有扩展属性确实很有价值,它们被整理并收录到了 CSS3 草案中。

word-wrap 属性就是其中很有代表性的例子。它决定了文本行超过容器的边界时是否断开转行。目前这一属性已经得到了绝大多数主流浏览器的支持。





在网页中使用“大、中、小”的字体字号选择切换按钮,可以方便不同人群的阅读习惯。下面以wordpress默认主题Twenty Eleven为例,把该功能集成到Wordpress主题中。本文方法不适合cookies记录。

操作步骤

1.打开Twenty Eleven主题文章页面模板single.php,把下面javascript代码:

<script type="text/javascript">function doZoom(size) {  var zoom = document.all ? document.all['primary'] : document.getElementById('primary');  zoom.style.fontSize = size + 'px';  }  </script>

加到第12行的div上面:

<div id="primary">

注:primary为正文内容所在的id选择器标签名称,可根据不同主题进行修改,前提正文内容所在选择器必须是

<div id="primary">

形式。

2.把下面代码:

<div class="font"><a href="javascript:doZoom(12)">小</a> <a href="javascript:doZoom(13)">中</a> <a href="javascript:doZoom(18)">大</a></div>

加到下方代码的下面,视不同主题可以放在自己认为合适的位置。数字为不同的字号大小,可自行修改:

<span class="nav-next"><?php next_post_link( '%link', __( 'Next <span class="meta-nav">&rarr;</span>', 'twentyeleven' ) ); ?></span>

3.最后根据不同的主题添加适当的样式控制。


最近忙着做一个新的#wordpress#站,但是里面需要设置自定义字段,虽然系统有默认的添加方法,但使用起来很是麻烦(我记不住那些调用代码……),在找了近半个月的时间之后,学会了如何在wp后台添加自定义域控制面板!

当然,已经有大神做出来了牛逼闪闪的插件,但我不想用……如果想和我一样手动修改文件的朋友继续看,否则请移步wp官网插件介绍页:Custom Field Template

先上我弄好的图吧,毕竟有图才有真相!首先是后台效果:

接着是前台显示效果,缩略图是另外调用的,可以忽略:

其实方法很简单,只要修改模板里的函数文件 functions.php,以及前台调用的页面模板即可。下面我先介绍笼统的做法。

- 阅读剩余部分 -

长时间不登陆wordpress博客,容易忘记后台登陆密码,一般情况下有2种办法解决这个问题。

第一种很简单,在登陆界面点击“忘记密码”,然后输入登陆账号或电子邮箱地址,此时wordpress会发送一封重置密码的邮件至你的电子邮箱。

第二种方法就是在phpmyadmin里修改数据表。

①在数据库里找到“wp_users”表,选择你需要更改密码的用户;

②点击“编辑”,修改“user_pass”字段的数值;

③由于wordpress的密码是使用md5加密方式,所以我们要选择“MD5”函数,然后再填写你想用的密码;

④保存后即可使用新密码登陆wordpress。