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-wrap

大家在制作的时候有时候会碰到英文文本超过固定宽度,不会自己换行的问题。这种问题以前解决的时候大多都用overflow:hidden或者JavaScript来控制,让其看起来接近完美。当CSS3出现的时...

css 长单词不换行溢出容器的解决方法 word-wrap与word-break

这两个东西是什么,我相信至今还有很多人搞不清,只会死记硬背的写一个word-wrap:break-word;word-break:break-all;这样的东西来强制断句,又或者是因为这两个东西实在是...

css换行(white-space、word-wrap、word-break)

white-space 值 描述 normal 默认。空白会被浏览器忽略。 pre 空白会被浏览器保留。其行为方式类似 HTML 中的 标签。 nowrap 文...

css word-wrap和word-break强制换行

http://www.wufangbo.com/css-qiang-zhi-huan-hang/ 强制换行与强制不换行问题曾经一度困扰着我,每当遇到换行问题时候那就是痛苦回忆的开始,现在终于痛定...

CSS:Word_break、Word_Wrap的区别

在div中,文本布局经常出现,换行混乱的情况。 问题表现:1.如果是全英文字符串,中间不包含任何符号(包括空格),不自动换行. 2.中英文混写,则在英文字符串的开始处换行(英文长度>d...

CSS中word-wrap、word-break、white-space

一、word-wrap word-wrap:normal(默认)|break-word; 参数 normal:允许内容顶开指定的容器边界。 break-word:内容将在边界内换行,必...
  • whaxrl
  • whaxrl
  • 2014年04月28日 15:19
  • 681

使用CSS确定HTML中的断句格式——你真的了解word-wrap和word-break的区别吗

你真的了解word-wrap和word-break的区别吗? 这两个东西是什么,我相信至今还有很多人搞不清,只会死记硬背的写一个word-wrap:break-word;word-break:bre...
  • r5014
  • r5014
  • 2017年06月08日 10:03
  • 207

CSS中word-wrap与word-break的区别

兼容IE 和FF 的换行CSS样式 最好的方式是 以下为引用内容:  word-wrap:break-word; overflow:hidden; 而不是 以下为引用内容:  word-wra...

溢出文字处理CSS属性——text-overflow、word-break、word-wrap和white-space

一、首先依次介绍这几个文字处理的CSS属性 1、word-break:  word-break 属性规定自动换行的处理方法。 当行尾放不下一个单词时,决定单词内部该怎么摆放。  b...

text-wrap、text-wrap、word-break、word-spacing、white-space等文字排版CSS总结

word-wrap text-wrap word-break word-spacing white-space
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css3的word-break
举报原因:
原因补充:

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