文本强制一行显示，多余的显示省略号

最新推荐文章于 2023-08-31 17:59:16 发布

weixin_30760895

最新推荐文章于 2023-08-31 17:59:16 发布

阅读量468

点赞数

原文链接：http://www.cnblogs.com/caichunbao/p/6856833.html

版权

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

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

<div id="title">这是一段长长的标题</div>
#title{
    overflow:hidden;  //超出部分隐藏
    text-overflow:ellipsis;  //超出部分显示...
    white-space:nowrap;  //文本强制一行显示    
}

转载于:https://www.cnblogs.com/caichunbao/p/6856833.html