zoukankan      html  css  js  c++  java
  • 多行文本,垂直居中显示,文字超出高度显示省略号

    最近项目中遇到多行文本,显示不全想打省略号,块状文本垂直居中显示,功能实现如下,

    html:结构

    <div class="questype-rate">
      <ul class="clearfix">
        <li>
          <div class="namebox">
            <div class="question-name">
              <div class="namerow">
                <div class="namecell">
                   听力理解理解说话者的意图听力理解理解说话者的意图理解说话者的意图说话者的说话者的意图理解说话者的意图说话者的说话者的
                </div>
              </div>
            </div>
          </div>

          <div class="result-rate clearfix">

            <span class="fl"><img src="images/icon-man.png">&nbsp;42.00%</span>

            <span class="fr"><img src="images/icon-flag.png">&nbsp;53.00%</span>
          </div>

        </li>    

        <li>
          <div class="namebox">
            <div class="question-name">
              <div class="namerow">
                <div class="namecell">
                   听力理解理解说话者的意图听力理解理解说话者的意图
                </div>
              </div>
            </div>
          </div>

          <div class="result-rate clearfix">

            <span class="fl"><img src="images/icon-man.png">&nbsp;42.00%</span>

            <span class="fr"><img src="images/icon-flag.png">&nbsp;53.00%</span>
          </div>

        </li>    

        <li>
          <div class="namebox">
            <div class="question-name">
              <div class="namerow">
                <div class="namecell">
                   听力理解理解说话者的意图
                </div>
              </div>
            </div>
          </div>

          <div class="result-rate clearfix">

            <span class="fl"><img src="images/icon-man.png">&nbsp;42.00%</span>

            <span class="fr"><img src="images/icon-flag.png">&nbsp;53.00%</span>
          </div>

        </li>

    </ul>
    脚本:

    <script type="text/javascript">
      $(function(){
        $(".questype-rate ul li .namebox").each(function(i){
        var divH = $(this).height();
        var txt = $(this).find(".namecell");
        while (txt.outerHeight() > divH) {
        txt.text(txt.text().replace(/(s)*([a-zA-Z0-9]+|W)(...)?$/, "..."));
        };
      });
    })
    </script>

    css样式:

    .questype-rate{margin-top: 32px;}
    .questype-rate ul li{float: left; position: relative; background: #F9F9F9;border:1px solid #DEDEDE;border-radius: 5px;height: 100px; 116px;margin-right: 12px;margin-bottom: 12px;}
    .questype-rate ul li .namebox{height: 66px;overflow: hidden;}
    .questype-rate ul li .question-name{display: table;margin-top: 10px;padding:0 11px;}
    .questype-rate ul li .question-name .namerow{display: table-row;}
    .questype-rate ul li .question-name .namecell{display: table-cell;vertical-align: middle;font-size: 9px;height: 60px;}
    .questype-rate ul li .result-rate{100%;position: absolute;bottom: 0;left: 0;height: 26px;line-height: 26px;background: #E8E8E8;font-size: 10px;}
    .questype-rate ul li .result-rate .fl{margin-left: 5px;}
    .questype-rate ul li .result-rate .fr{margin-right: 5px;}

    呈现效果:

  • 相关阅读:
    CentOS7设置hostname、hosts、静态IP地址、关闭防火墙
    排序算法总结对比
    Java——HashMap使用Demo
    Java——HashMap底层源码分析
    Java——LinkedList使用Demo
    laravel框架之及時更改
    laravel框架之批刪&全選&全不選&反選
    laravel框架之即點即改
    laravel框架之修改
    laravel框架之增刪改查
  • 原文地址:https://www.cnblogs.com/jinglover/p/5611851.html
Copyright © 2011-2022 走看看