Koubei UED

文本的排版依据语言的不同会有一些格式上的要求，比如简体中文中类似逗号、分号等标点符号不会出现在一行的开头，对于英文来讲就是一个完整单词不会在两行显示，浏览器会依据类似这样的原则来显示文本。但是由于网页有宽度限制的，连续的超长的字母、数字或标点符号超出其所在区域宽度的限制而导致影响页面视觉，如例1所示。这个问题在显示用户输入信息时尤为突出，这里就是要说如何解决这个问题。

在CSS3草案中，对文本的处理新增了两个新属性word-wrap和word-break来解决这个问题：

1. {word-wrap:break-word;} ：依照亚洲语言和非亚洲语言的文本规则，允许在字内换行，且允许非亚洲语言文本行的任意字内断开
2. {word-break:break-all;} ： 内容将在边界内换行，如需要则词内换行（word-break）也行发生

阅读全文»

首先先对行内元素（inline elements，比如span,a,b等。）和块元素(block elements，比如div,h1,p等)进行一下知识回顾.简而言之，它们的区别可以分为下几点

1. 块元素会自动在末尾加一个换行，而行内元素不会。
2. 块元素可以定义自身的高度（width）和宽度(height),而行内元素不可以。
3. 块对象定义的自身垂直边距可以改变行高，而行内元素虽然可以定义但改变不了行高。

在前端开发中，我们遵循结构，表现，行为相分离。所以将修饰型图片利用css的background把它写在表现层中。那最常见的就是icon的应用。如：

去我的flickr相册。这是利用行内元素的左侧内间距（padding-left）实现的icon+文字的组合。

但有时候，我们还需要另外一种表现形式，只是单独的icon而不需要文字或者链接，并且是图文混排。也许你想只要把span里面的文字删除不就可以了么，实际上并非如你所愿。

。如果你现在在ie下，肯定什么也看不到。

原因是行内元素在内容为空的情况下,ie认为它的width为0。

 ,现在在ie下可以看到了。

根据行内元素的特性，并不能为其设置一个宽度来解决，所以只能在里面加一个毫无意义的空格用来占位，来生成一个高度值，但在无css的条件下（在spider的眼里），无法得知它为何物。如下:

<a class="icon-flickr"> </a>

所以这样的解决方案让人无法接受。

使用inline-block就可以解决这个问题 阅读全文»