单行/多行文本溢出的省略样式

在日常开发展示页面,如果一段文本的数量过长,受制于元素宽度的因素,有可能不能完全显示,为了提高用户的使用体验,这个时候就需要我们把溢出的文本显示成省略号

1. 单行文本溢出

text-overflow:规定当文本溢出时,显示省略符号来代表被修剪的文本
white-space:设置文字在一行显示,不能换行
overflow:文字长度超出限定宽度,则隐藏超出的内容
.ellipsis {
    
    white-space: nowrap; 
    text-overflow: ellipsis; 
    overflow: hidden; 
 }

2. 多行文本溢出

你可能感兴趣的:(前端基础,css,html,html5)