视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
cssword-break属性的具体使用方法介绍
2020-11-27 18:50:58 责编:小采
文档


处理网页内的文本就会有各种的换行的情况发生,那么页面的元素在什么样的情况下进行换行操作呢?我们可以通过word-break 代码来精确的控制这个换行。

语法:

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

参数:

normal :  依照亚洲语言和非亚洲语言的文本规则,允许在字内换行
break-all :  该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本
keep-all :  与所有非亚洲语言的normal相同。对于中文,韩文,日文,不允许字断开。适合包含少量亚洲文本的非亚洲文本

说明:

设置或检索对象内文本的字内换行行为。尤其在出现多种语言时。
对于中文,应该使用break-all 。
对应的脚本特性为wordBreak。请参阅我编写的其他书目。

示例:

div {word-break : break-all; }

应用代码。我们在test 元素内给 word-break进行了参数的确定。

p.test {word-break:hyphenate;}

在浏览器的支持性方面, word-break还是非常符合要求的。浏览器基本都支持这个代码。

word-break 的用法。它的默认值为 normal 它的继承性为 yes 它的版本为 CSS3

java 的用法。object.style.wordBreak="keep-all"在这个java 语句当中,我们又给出了一个不同的参数值。

代码的语法。

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

这个代码一共有三种不同的情况。normal 是浏览器默认。break-all 是单词内换行。keep-all 是半角空格或者连字符。

style 流程,我们给出了两种不同的方式让学习者进行对比。同时,我们也可以看见,对于外框的定义也是同时启用的。

<style> 
p.test1
{
width:13em; 
border:2px solid #000000;
word-break:hyphenate;
}

p.test2
{
width:13em; 
border:2px solid red;
word-break:break-all;
}
</style>

下载本文
显示全文
专题