尹学洪,多媒体光盘,年鉴光盘,地方志光盘,志书光盘,光盘导航,志鉴光盘制作

CSS-中英文两端对齐,英文不断词,自动换行

作者:江苏锐德 2018/9/16 20:05:42 人气:

CSS:
{
word-break: keep-all;
    word-wrap: break-word; // 只对英文起作用,以单词作为换行依据。
    white-space: pre-wrap; //只对中文起作用,强制换行。
    text-align:justify;  //css英文语句的两端对齐:
    text-justify:inter-ideograph;
}

禁止换行:

{ white-space:nowrap; 
    overflow:hidden;
    text-overflow:ellipsis; //让多出的内容以省略号...来表达。但是这个属性主要用于IE等浏览器,Opera浏览器用-o-text-
    white-space:nowrap;
}

单行文字如果超出2行用省略号表示:

.text { width:220px;
 word-break:break-all;
 display:-webkit-box;
 -webkit-line-clamp:2;
 -webkit-box-orient:vertical;
 overflow:hidden;
}

word-break 属性规定自动换行的处理方法。

normal 使用浏览器默认的换行规则。 
break-all 允许在单词内换行。 
keep-all 只能在半角空格或连字符处换行。

word-break 当行尾放不下一个单词时,决定单词内部该怎么摆放。 
break-all: 强行上,挤不下的话剩下的就换下一行显示呗。 
keep-all: 放不下了,那就另起一行展示,再放不下,也不退缩。

word-wrap 当行尾放不下时,决定单词内是否允许换行 
normal: 单词太长,换行显示,再超过一行就溢出显示。 
break-word: 当单词太长时,先尝试换行,换行后还是太长,单词内还可以换行。

white-space: normal | nowrap | pre | pre-wrap | pre-line 

pre: 保留所有的空格和回车,且不允许折行。 
pre-wrap: 保留所有的空格和回车,但是允许折行。 
pre-line: 会合并空格,且允许折行

text-align:justify 是专门为英文设计的,用来实现英文语句的两端对齐

text-justify:auto | distribute |distribute-all-lines | distribute-center-last | inter-cluster | inter-ideograph | inter-word | kashida | newspaper 

auto : 默认值。允许浏览器代理用户确定使用的两端对齐法则。
distribute : 处理空格很像newspaper ,适用于东亚文档。尤其是泰文。
distribute-all-lines : 两端对齐行的方式与distribute 相同,也同样不包含两段对齐段落的最后一行。适用于表意字文档
distribute-center-last : 未实现。
inter-cluster : 调整文本无词间空格的行。这种模式的调整是用于优化亚洲语言文档的。
inter-ideograph : 为表意字文本提供完全两端对齐。他增加或减少表意字和词间的空格
inter-word : 通过增加字之间的空格对齐文本。该行为是对齐所有文本行最快的方法。它的两端对齐行为对段落的最后一行无效
kashida : 通过拉长选定点的字符调整文本。这种调整模式是特别为阿拉伯脚本语言提供的。需要IE5.5+支持
newspaper : 通过增加或减少字或字母之间的空格对齐文本。是用于拉丁文字母表两端对齐的最精确格式

说明:设置或检索对象内调整文本使用的对齐方式。因为这个属性影响文本布局,所以text-align 属性必须被设置为justify 。此属性只作用于块对象。此属性对于currentStyle 对象而言是只读的。对于其他对象而言是可读写的。对应的脚本特性为textJustify 。

以上方法对chrome(360也是chrome内核)无效,还需再加上下面代码: 
word-break:break-all

上一篇:mysql一键提取缩略图的语句
下一篇:CSS 背景图片自定义大小或自适应大小
共有:条评论信息评论信息
发表评论
姓 名: 验证码: