CSS3文字超出块元素显示省略号

代码:

    <style>
        span{
            display: block;               
            width: 300px;
            overflow: hidden;   
            white-space: nowrap;
            text-overflow: ellipsis;
        }
    </style>
    <span>文字超出显示省略号,文字超出显示省略号,文字超出显示省略号,文字超出显示省略号,文字超出显示省略号,文字超出显示省略号,文字超出显示省略号,文字超出显示省略号,文字超出显示省略号,</span>

效果图:

注意情况讲解:

1.必须设置标签元素为块元素

2.元素必须设置宽度

3.overflow: hidden;超出块元素宽度,隐藏

4.white-space: nowrap;块元素里面的文本不换行

5.text-overflow: ellipsis;属性规定当文本溢出包含元素时显示省略号