做移动端的开发,总会适应各个手机的尺寸,常常会遇到标题单行显示,多余的显示省略号,这些只用css就能搞定了。

  text-overflow 属性规定当文本溢出包含元素时发生的事情。仅仅使用这一个还不能实现想要得到的效果,想要想要的效果,还必须设置文本强制一行的显示,这是就需要white-space属性,white-space 属性设置如何处理元素内的空白,此时设置为nowrap,文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。这样还是不能实现预期的效果,必需设置溢出部分隐藏了,overflow 属性规定当内容溢出元素框时发生的事情,设置为hidden,即可达到预期效果。下面为完整代码:

<div >
    overflow:hidden;  //超出部分隐藏
    text-overflow:ellipsis;  //超出部分显示...
    white-space:nowrap;  //文本强制一行显示    
}

 

相关文章: