本文共 529 字，大约阅读时间需要 1 分钟。

直接上代码

div{    overflow:hidden;    white-space:nowrap;    text-overflow:ellipsis;    width:100px;}

写一个超长的文本（故意写成这个样子很多空格和回车）

   
    艹艹艹艹擦擦擦擦啛啛喳喳错艹艹艹艹超常ccccccc                 cccccccccccccccccccccccccccccccccccccc
   

执行效果：

一一解释div中的属性：

• overflow:hidden  规定当内容溢出元素框时应该怎么处理，hidden 表示内容会被修剪，并且剪掉的内容是不可见的。
  在这里用来设置文本超出长度之后不会出现滚动条拉动。
• white-space:nowrap 规定的是如何处理换行和空格，nowrap会忽略所有空格和换行符让文本在一行显示，设置文本超出长度之后不会自动换行显示
• text-overflow:ellipsis 就是用来规定超出的文本用省略号代替（默认值是clip）

以上几个属性一定要配合在一起使用

注意：

在用span标签时要设置display:inline-block，因为span是行内样式这样才可以设置宽高。

转载地址：http://iwprn.baihongyu.com/