您的位置:首页> 前端教程> CSS3教程
文章导航

CSS word-break

2019-9-17 21:49| 作者: admin| 查看: 1529| 评论: 0|来自: 蚂蚁部落

CSS不是一门编程语言,未来不可知,起码当前算不上。

难度上根不能与其他真正编程语言相比,但也不是那么轻松。

很多属性让人感觉十分繁琐,且不太容易精确的理解属性值所要表达的含义。

word-break属性可能会给不少朋友带来上述所说的困扰,下面通过代码实例进行一下详细介绍。

语法结构:

[CSS] 纯文本查看 复制代码
word-break:normal | break-all | keep-all | break-word

word-break由两个单词构成:

(1).word:具有"单词"的意思,注意单词与字符的区别,单词是由一个或者多个字符构成,看做一个整体。

(2).break:具有"破坏"或者"换行"的意思。

此属性做到了名副其实,用于规定单词内换行规则,可以防止过长的单词打破布局的情况。

属性值解析:

(1).normal:默认值,保持浏览器的默认处理。

(2).break-all:强制将单词截断实现换行效果。

(3).keep-all:规定不允许字断开。

(4).break-word:此属性值尚处于实验阶段,用于确保文本不会溢出。

对属性值的介绍非常简短,后面会结合代码实例详细阐述各个属性值的具体功能。

浏览器支持:

(1).IE浏览器支持此属性。

(2).edge浏览器支持此属性。

(3).谷歌浏览器支持此属性。

(4).火狐浏览器支持此属性。

(5).opera浏览器支持此属性。

(6).safria浏览器支持此属性。

所有浏览器都支持此属性,但是属性值存在着一定浏览器支持问题:

(1).火狐和IE不支持break-word。

(2).移动端浏览器也对属性值支持度也不同,本文不再列举,可以自行查询。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>蚂蚁部落</title> 
<style type="text/css">
div{
  width:150px;
  height:100px;
  border:1px solid blue;
  margin-top:5px;
} 
</style> 
</head> 
<body> 
<div>I am a good student ,and you?</div> 
</body> 
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201901/23/222259vksthuens5r9un9m.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

代码分析如下:

(1).word-break默认值是normal,可以省略,保持浏览器的默认处理。

(2).默认规则是,只允许单词间换行,不允许单词内换行(将数字看做单词,其他属性值也是,后面不再强调),比如student,如果一行内显示不开,会换到下一行展示,而不是将这个单词折断换行,即便此单词换行后依然展示不开,也不会被折断,依然显示在一行,可能会冲破布局。

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>蚂蚁部落</title> 
<style type="text/css">
div{
  width:150px;
  height:70px;
  border:1px solid blue;
  margin-top:5px;
} 
</style> 
</head> 
<body> 
<div>I am a good AAAAAAAAAAAAAAAAAAAAA ,and you?</div> 
</body> 
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201901/23/222325t9uaca9scmrsn4zc.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

"AAA..."很长,但是它不会为了换行而将一个单词折断。

有一点顺其自然的感觉,如果这一行显示不开,就换一行显示。

如果在新的一行依然显示不开,也不会折断,总之一句话,不会为了换行把一个单词折断。

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>蚂蚁部落</title> 
<style type="text/css">
div{
  width:150px;
  height:50px;
  border:1px solid blue;
  margin-top:5px;
  word-break: break-all;
} 
</style> 
</head> 
<body> 
<div>I am a good student ,and you?</div> 
</body> 
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201901/23/222348d8x18zk1wzqwr2xx.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

(1).属性值名称非常霸气,所有的内容必须听话。

(2).如果单词显示不开,那么必须折断换行,不会给"全尸",有点恐怖的感觉。

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>蚂蚁部落</title> 
<style type="text/css">
.en{ 
  width:150px; 
  height:100px; 
  border:1px solid blue; 
  margin-top:5px; 
  word-break:keep-all; 
} 
.cn{ 
  width:150px; 
  height:100px; 
  border:1px solid blue; 
  margin-top:5px; 
  word-break:keep-all; 
} 
</style> 
</head> 
<body> 
  <div class="en">I am a good student ,and you?</div> 
  <div class="cn">蚂蚁部落欢迎您,分享和互助是进步最大的源动力。</div> 
</body> 
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201901/23/222416bpgphnrlql22ppg9.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

代码分析如下:

(1).keep-all属性值作用于单词与normal的功能相同。

(2).对于中文、韩文或者日文,如果紧挨在一起,不允许换行,运行效果体现了这一点。

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>蚂蚁部落</title> 
<style type="text/css">
.en{ 
  width:150px; 
  height:100px; 
  border:1px solid blue; 
  margin-top:5px; 
  word-break:break-word; 
} 
.cn{ 
  width:150px; 
  height:100px; 
  border:1px solid blue; 
  margin-top:5px; 
  word-break:break-word; 
} 
</style> 
</head> 
<body> 
  <div class="en">I am a good AAAAAAAAAAAAAAAAAAA ,and you?</div> 
  <div class="cn">蚂蚁部落欢迎您,分享和互助是进步最大的源动力。</div> 
</body> 
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201901/23/222443yk9tth5z0m66duvm.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

代码分析如下:

(1).break-word属性值尚属实验性质,未被标准化。

(2).此属性值可以确保文本不会溢出。

(3).如果单词过长会换行显示,如果在新的一行依然无法完整显示,那么就将其折断换行,对于中文、韩文或者日本的处理则与normal相同,显示不开就换行。

1

鲜花

握手

雷人

路过

鸡蛋

刚表态过的朋友 (1 人)

上一篇:CSS3 transform-style下一篇:CSS3 vh

最新评论

返回顶部