当通过把overflow属性的属性值设定为”hidden”的方法,将盒中容纳不下的内容隐藏起来时,如果使用text-overflow属性,可以在盒的末尾显示一个代表省略号”…”。但是,text-overflow属性只在当盒中的内容在水平方向上超出盒的容纳范围时有效。例子如下:

电脑培训,计算机培训,平面设计培训,网页设计培训,美工培训,Web培训,Web前端开发培训

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

电脑培训,计算机培训,平面设计培训,网页设计培训,美工培训,Web培训,Web前端开发培训

  • box-shadow属性的使用方法

在css3中,可以使用box-shadow属性让盒在显示时产生阴影效果。写法如下:

box-shadow:length length length color

其中,前面三个length分别指阴影离开文字的横向距离、阴影离开文字的纵向距离