zoukankan      html  css  js  c++  java
  • css实现文本过长时自动添加省略号

    1. 效果

     

    2. Html

    <div id="main_app_content" class="container">
        <div class="long-text-test1">
            好长
        </div>
        <div class="long-text-test1">
            好长好长好长好长好长好长好长好长好长
        </div>
        <div class="long-text-test2">
            好长
        </div>
        <div class="long-text-test2">
            好长好长好长好长好长好长好长好长好长
        </div>
    </div>
    

      

    3. Less

    .process-long-text-001(@100px) {
       @width;
      overflow: hidden;
      -ms-text-overflow: ellipsis;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    
    .long-text-test1 {
      .process-long-text-001();
    }
    
    .long-text-test2 {
      .process-long-text-001(200px);
    }
    

      

  • 相关阅读:
    环保
    A股行情记录
    航运
    黑五类
    家电
    妖股
    高校概念股
    科技园区
    壳股
    白底黑字or黑底白字,眼睛更喜欢哪一个?
  • 原文地址:https://www.cnblogs.com/ningkyolei/p/5339893.html
Copyright © 2011-2022 走看看