码库记事本

码库记事本

CSS设置一行文字,超出部分自动隐藏

小诸哥 0
  1. .textone {
  2. overflow: hidden;
  3. text-overflow: ellipsis;
  4. display: -webkit-box;
  5. line-height: 25px;
  6. max-height: 25px;
  7. -webkit-line-clamp: 1;
  8. -webkit-box-orient: vertical;
  9. }

 将行高和最大行高设置为一样的值,-webkit-line-clamp: 1,限制行数,这样就可以定义超过一行自动隐藏的效果了;设置超过两行自动隐藏是效果,line-height和max-heinght成比例,-webkit-line-clamp设为2,这样就可以实现超过两行自动隐藏多余部分的效果了:代码和效果图如下:

  1.  
  1. .textTow {
  2. overflow: hidden;
  3. text-overflow: ellipsis;
  4. display: -webkit-box;
  5. line-height: 23px;
  6. max-height: 46px;
  7. -webkit-line-clamp: 2;
  8. -webkit-box-orient: vertical;
  9. }
  1.  

标签: 怎么 按钮