CSS3中新增文本样式——text-overflow

text-overflow:clip / ellipsis  / string /

clip 裁剪多余文字 

ellipsis 以省略号表示裁剪文字 

string 以指定字符串表示裁剪文字（非所有浏览器都支持，firefox支持）  

案例:clip

使用的大前提，要先设置下面这两个地方，分别是： 1.要先设置 不自动换行 */ white-space: nowrap; /* 2.超出之后，要隐藏 */ overflow: hidden;   text-overflow: clip; 

HTML:

Markup

<style>
        .box1{
            width: 300px;
            height: 200px;
            border: 1px solid blue;
            margin: 0 auto;
             /* 文本裁切 */
            /* 使用的大前提，要先设置下面这两个地方，分别是： */
            /* 1.要先设置 不自动换行 */
            white-space: nowrap;
            /* 2.超出之后，要隐藏 */
            overflow: hidden;
            /* text-overflow: clip; */
            /* 以省略号表示裁剪文字 */
            text-overflow: ellipsis;
            /* text-overflow: "未完待续"; */
           
            
        }

CSS:

Markup

<div class="box1">
        送你一朵小红花
        开在你昨天新长的枝桠
        奖励你有勇气 主动来和我说话
</div

结果：

text-overflow: clip;