当通过把overflow属性的属性值设定为”hidden”的方法,将盒中容纳不下的内容隐藏起来时,如果使用text-overflow属性,可以在盒的末尾显示一个代表省略号”…”。但是,text-overflow属性只在当盒中的内容在水平方向上超出盒的容纳范围时有效。例子如下:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>text-overflow属性使用示例</title> <style> div{ white-space: nowrap; width:300px; border:solid 1px orange; overflow: hidden; text-overflow:ellipsis; } </style></head><body><div>炸弹阿萨德阿萨德 沙雕暗示的萨达萨达阿萨德</div></body></html>
box-shadow属性的使用方法
在css3中,可以使用box-shadow属性让盒在显示时产生阴影效果。写法如下:
box-shadow:length length length color
其中,前面三个length分别指阴影离开文字的横向距离、阴影离开文字的纵向距离