wordpress在默认安装中没有断词断句的功能,有时候一个长一点的英文单词就会跑到屏幕外面,修改英文断词断句自动换行很简单。在css中添加几天规则就可以了。
首先你需要安装一个可以在中插入代码的插件。在安装插件中搜索Insert Headers and Footers,安装好Insert Headers and Footers后,在里面添加
关于修改CSS英文断词断句换行的一些例子:
中英文断句换行
{ word-break: keep-all; word-wrap: break-word; white-space: pre-wrap; text-align:justify; text-justify:inter-ideograph; }
word-wrap: break-word,只对英文起作用,以单词作为换行依据。white-space: pre-wrap,只对中文起作用,强制换行。text-align:justify,CSS英文语句的两端对齐:
禁止文章内容换行:
{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
text-overflow:ellipsis,让多出的内容以省略号…来表达。但是这个属性主要用于IE等浏览器。
单行文字如果超出3行用省略号表示:
.text { width:800px; word-break:break-all; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
word-break:(当行尾放不下一个单词时,决定单词内部该怎么摆放。)
normal | 使用浏览器默认的换行规则。 |
break-all | 允许在单词内换行。强行上,挤不下的话剩下的就换下一行显示呗。 |
keep-all | 只能在半角空格或连字符处换行。放不下了,那就另起一行展示,再放不下,也不退缩。 |
word-wrap: (当行尾放不下时,决定单词内是否允许换行)
normal | 单词太长,换行显示,再超过一行就溢出显示。 |
break-word | 当单词太长时,先尝试换行,换行后还是太长,单词内还可以换行。 |
white-space:
pre | 保留所有的空格和回车,且不允许折行。 |
pre-wrap | 保留所有的空格和回车,但是允许折行。 |
pre-line | 会合并空格,且允许折行。 |
text-align:
justify | 专门为英文设计的,用来实现英文语句的两端对齐 |
text-justify :
auto | 默认值。允许浏览器代理用户确定使用的两端对齐法则。 |
distribute | 处理空格很像newspaper ,适用于东亚文档。尤其是泰文。 |
distribute-all-lines | 两端对齐行的方式与distribute 相同,也同样不包含两段对齐段落的最后一行。适用于表意字文档 |
distribute-center-last | 未实现。 |
inter-cluster | 调整文本无词间空格的行。这种模式的调整是用于优化亚洲语言文档的。 |
inter-ideograph | 为表意字文本提供完全两端对齐。他增加或减少表意字和词间的空格 |
inter-word | 通过增加字之间的空格对齐文本。该行为是对齐所有文本行最快的方法。它的两端对齐行为对段落的最后一行无效 |
kashida | 通过拉长选定点的字符调整文本。这种调整模式是特别为阿拉伯脚本语言提供的。 |
newspaper | 通过增加或减少字或字母之间的空格对齐文本。是用于拉丁文字母表两端对齐的最精确格式 |
说明: | 设置或检索对象内调整文本使用的对齐方式。因为这个属性影响文本布局,所以text-align 属性必须被设置为justify 。此属性只作用于块对象。此属性对于currentStyle 对象而言是只读的。对于其他对象而言是可读写的。对应的脚本特性为textJustify 。 |