div内容超长显示省略号
作者:陆金龙
发表时间:2017-09-23 15:37
1. Div内文本过长不换行
1.1 文本不换行 超出部分显示"..."
注意:要设置width最大值
.style1 {
float:left;
white-space:nowrap;
text-overflow:ellipsis;
overflow: hidden;
}
div 两行省略号 要设置width最大值
.style11 {
text-overflow: -o-ellipsis-lastline;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
1.2 文本不换行 超出部分隐藏
.style2
{
float: left;
white-space:nowrap;
overflow: hidden;
}
1.3文本不换行 超出时出现滚动条 拖动可查看全部内容
.style3
{
float:left;
white-space:nowrap;
}
1.4 根据Div宽度自动显示隐藏
应用实例:界面大小变化时,Div宽度变化,文字则根据Div的宽度显示或隐藏
样式:
.style4
{
float:left;
display:block;
white-space:nowrap;
text-overflow:ellipsis;
-o-text-overflow:ellipsis;
overflow: hidden;
}