css3的word-break

原创 2013年12月03日 11:45:45
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
	p{ width:12em; border:1px dashed #F00;}
	.hyphenate{ word-break:hyphenate;}
	.break-all{ word-break:break-all;}
	.break-strict{ word-break:break-strict;}
	.keep-all{word-break:keep-all;}
	.loose{ word-break:loose;}
	.normal{ word-break:normal}
</style>
<title>无标题文档</title>
</head>

<body>

<p class="hyphenate">
	这个是word-break:hyphenate;的效果。<br />
    1234567890 1234567890 1234567890 1234567890 1234567890,1234567890。1234567890,1234567890,1234567890 1234567890
</p>
<p class=" break-all">
	这个是word-brea:kbreak-all;的效果。<br />
     1234567890 1234567890 1234567890 1234567890 1234567890,1234567890。1234567890,1234567890,1234567890 1234567890
</p>
<p class=" break-strict">
	这个是word-brea:break-strict;的效果。只在空格和句号。换行<br />
    1234567890 1234567890 1234567890 1234567890 1234567890,1234567890。1234567890,1234567890,1234567890 1234567890
</p>
<p class="keep-all">
	这个是word-brea:keep-all;的效果。 只能在半角空格或连字符处换行。<br /> 
    1234567890 1234567890 1234567890 1234567890 1234567890,1234567890。1234567890,1234567890,1234567890 1234567890
</p>
<p class=" loose">
	这个是word-brea:keep-all;的效果 。空格换行<br /> 
    1234567890 1234567890 1234567890 1234567890 1234567890,1234567890。1234567890,1234567890.1234567890 1234567890
</p>
<p class=" normal">
	这个是word-brea:normal;的效果 。空格换行<br />
    1234567890 1234567890 1234567890 1234567890 1234567890,1234567890。1234567890,1234567890.1234567890 1234567890
</p>
</body>
</html>
word-break规定非中日韩文本的换行规则。

效果图:


版权声明:原创文章,请标明出处~~~

CSS3 word-break

html 代码:      小笼包子桶子鸡铁塔开封拉面烩面花生糕铁塔小笼包子 css 代码: .hostTags_list{     margin-top: 44px;     ...
  • szy494620829
  • szy494620829
  • 2013年06月04日 15:28
  • 389

css属性:word-wrap:break-word; 与 word-break:break-all 的用法;

前言:在一个长宽固定的div容器中,多行文字和英文句子都默认自动换行。不过,对于英语单词而言,会有一些微妙的变化! //没有添加word-wrap:break-word和word-break:brea...
  • zhangq0123
  • zhangq0123
  • 2016年10月19日 11:06
  • 685

css3中word-break与word-break的区别

链接
  • kbx8916
  • kbx8916
  • 2016年11月22日 11:45
  • 113

td使用word-break: break-all;强制换行无效的解决

今天发现表格内容不换行,加了word-break: break-all;也没有效果,后来检查发现用户编辑的html内容包含了CSS,其中有一项: td {padding-top:1px;padding...
  • apollokk
  • apollokk
  • 2015年10月23日 17:45
  • 4616

【css】你了解word-wrap和word-break的区别吗?

word-wrap: css的 word-wrap 属性用来标明是否允许浏览器在单词内进行断句,这是为了防止当一个字符串太长而找不到它的自然断句点时产生溢出现象。 word-break: c...
  • hongxiaoshuang
  • hongxiaoshuang
  • 2016年11月04日 17:20
  • 641

CSS3 Word-wrap、word-break、white-space

转载: http://www.w3cplus.com/content/css3-word-wrap CSS3中有关于文本效果的属性,前面在《CSS3 Text-shadow》和《...
  • wuyou1336
  • wuyou1336
  • 2017年02月28日 21:59
  • 93

word-wrap:break-word与word-break:break-all的关系及强制换行与强制不换行问题

word-wrap:break-word与word-break:break-all的关系:word-wrap:break-word与word-break:break-all共同点是都能把长单词强行断句...
  • javaloveiphone
  • javaloveiphone
  • 2016年03月18日 16:32
  • 1429

<td style="word-break:break-all"> 在html中控制自动换行

在html中控制自动换行 其实只要在表格控制中添加一句 就搞定了。 其中可能对英文换行可能会分开一个单词问题:解决如下: 语法:  word-break : normal...
  • tfy1332
  • tfy1332
  • 2013年07月22日 11:39
  • 9632

word-wrap和word-break css3

1.word-wrap normal 只在允许的断字点换行(浏览器保持默认处理)。 break-word 在长单词或 URL 地址内部进行换行。 2.word-break n...
  • u014451076
  • u014451076
  • 2016年02月28日 21:43
  • 244

换行word-wrap与word-break兼容IE和FIREFOX

word-wrap是控制换行的。使用break-word时,是将强制换行。中文没有任何问题,英文语句也没问题。但是对于长串的英文,就不起作用。word-break是控制是否断词的。normal是默认情...
  • tsuliuchao
  • tsuliuchao
  • 2009年09月16日 10:45
  • 7100
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css3的word-break
举报原因:
原因补充:

(最多只允许输入30个字)