<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5标签</title>
<style>
p{
/**
white-space：nowrap表示文本不会换行，在同一行继续，知道遇到
标签为止；
overflow：hidden不显示超过对象尺寸的内容，就是把超出的部分隐藏了；
text-overflow：ellipsis当文本对象溢出是显示...，当然也可是设置属性为clip不显示点点点；
-o-text-overflow:为了兼容opera浏览器
*/
width:200px
overflow:hidden
text-overflow:ellipsis
-o-text-overflow:ellipsis
white-space:nowrap
}
div{
/*文字超出高度不显示*/
overflow:hidden
display:block
height:60px
width:100px
}
</style>
</head>
<body>
<p>这样处理对搜索引擎更友好，因为标题实际上并未被截字，而是局限于宽度而未被显示而已。</p>
<div>这样处理对搜索引擎更友好，因为标题实际上并未被截字，而是局限于宽度而未被显示而已。</div>
</body>
</html>
css 默认盒子样式是 content-box, 宽高设定的是内容的宽高，设置边框可能会出现溢出的问题可以通过设置 border-sizing：border-box
我更喜欢用border-box，因为border-box更灵活一点，举个例子，我在业务中遇到一个问题，我的商品详情页的一个盒子是高度自适应的，为146px，但是在ie8浏览器上显示为146.8px，如何解决，如果对盒子设置height:146px则会出现被撑高的情况，因为box-sizing默认为content-box，你给元素设置宽高，只是给元素内容设置宽高，你元素的总高度是heigtht + border + padding所以就会出现撑高，解决方法就是给当前的盒子设置box-sizing: border-box这样你设置高度为146px时，会默然将元素内容的高度进行相应减少来保证整体高度为146px，这个最大的好处就是你这个盒子有好几个，而且有不同的padding和border值，解决这个的最好的方法就是给盒子设置border-box
