css是怎样完成在网页页面文本不换行、全自动换

日期:2021-03-18 类型:科技新闻 

关键词:h5小游戏,h5如何制作,免费h5在线制作,h5页面在线制作,测一测h5

本文详细介绍了css是怎样完成在网页页面文本不换行、全自动换行、强制性换行的方式,共享给大伙儿,实际以下:

强制性不换行

div{
white-space:nowrap;
}

全自动换行

div{ 
word-wrap: break-word; 
word-break: normal; 
}

强制性英文单词断行

div{
word-break:break-all;
}

CSS设定不改行:

overflow:hidden 掩藏
white-space:normal 默认设置
pre 换行和别的空白标识符都将遭受维护
nowrap 强制性在同1行内显示信息全部文字,直至文字完毕或遭受 br 目标

设定强行换行

word-break:
normal ; 按照亚洲地区語言和非亚洲地区語言的文字标准,容许在字内换行
break-all :  该个人行为与亚洲地区語言的normal同样。也容许非亚洲地区語言文字行的随意字内断掉。该值合适包括1些非亚洲地区文字的亚洲地区文字
keep-all :  与全部非亚洲地区語言的normal同样。针对汉语,韩文,日文,不容许字断掉。合适包括小量亚洲地区文字的非亚洲地区文字与之间的高宽比处理方法

看了以上的详细介绍,赶紧试1下,看看实际效果吧!

英文不换行

CSS里再加 word-break: break-all; 难题处理。这个难题仅有IE才有,在FF下检测,FF能够自身加翻转条,这样也不危害实际效果

提议大伙儿做Skin时,记得在body里加 word-break: break-all; 这样能够处理IE的架构被英文撑开的难题

下列引入word-break的表明, 留意word-break 是IE5+特有特性

英语的语法:

word-break : normal | break-all | keep-all

主要参数:

normal :  按照亚洲地区語言和非亚洲地区語言的文字标准,容许在字内换行
break-all :  该个人行为与亚洲地区語言的normal同样。也容许非亚洲地区語言文字行的随意字内断掉。该值合适包括1些非亚洲地区文字的亚洲地区文字
keep-all :  与全部非亚洲地区語言的normal同样。针对汉语,韩文,日文,不容许字断掉。合适包括小量亚洲地区文字的非亚洲地区文字

表明:

设定或查找目标内文字的字内换行个人行为。特别在出現多种多样語言时。
针对汉语,应当应用break-all 。
对应的脚本制作特点为wordBreak。

示例:

div {word-break : break-all; }

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。