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;

}