css3 word-break属性笔记

原创 国哥笔记  2018-01-01 16:24  阅读 1,577 views 次

word-break属性定义及用法

1、在css中,word-break属性是用来定义自动换行的处理方法,就是规定文本内容在容器一行装不下的时候可以在什么地方换行;

2、目前所有主流浏览器都支持word-break属性,但Opera浏览器还不支持word-break属性。

word-break属性值

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

语法格式:

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

一、word-break: normal;

normal属性值是用来定义自动换行按照浏览器默认的换行规则。

实例:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css3 word-break属性笔记</title>
<style>
p{width:200px;border:1px solid red;word-break:normal;}
</style>
<head/>
<body>
<p>本站记录了html css javascript php 数据库等相关知识
本篇笔记的url地址是https://www.ggbiji.com/css_word-break.html
</p>
</body>
</html>

运行结果:

css3 word-break属性笔记

发现:浏览器默认换行规则不允许在单词内换行,允许在空格和“-”处换行。

二、word-break: break-all;

break-all属性值是用来定义允许在单词内换行,就是在容器的一行装不下的情况下,可以把一个单词分成两部分,从下一行开始。

实例:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css3 word-break属性笔记</title>
<style>
p{width:200px;border:1px solid red;word-break:break-all;}
</style>
<head/>
<body>
<p>本站记录了html css javascript php 数据库等相关知识
</p>
</body>
</htm>

运行结果:

css3 word-break属性笔记

三、word-break: keep-all;

keep-all属性是用来定义不允许CJK(Chinese/Japanese/Korean)文本中的单词换行,只能在半角空格或连字符处换行,就是在容器的一行装不下的时候,会自动在半角空格或连字符处换行。非CJK文本的换行规则实际上和normal一致。

实例:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css3 word-break属性笔记</title>
<style>
p{width:200px;border:1px solid red;word-break:keep-all;}
</style>
<head/>
<body>
<p>本站记录了html css javascript php 数据库等相关知识</p>
</body>
</html>

运行结果:

css3 word-break属性笔记

更多css属性——>css属性大全

本文地址:https://www.ggbiji.com/css_word-break.html
版权声明:本文为 国哥笔记 原创/整理文章,欢迎分享,转载请注明出处!

发表评论


表情