zoukankan      html  css  js  c++  java
  • html,css-------关于firefox不支持text-overflow:ellipsis;的解决办法、、、、

    text-overflow:clip/ellipsis; 

    前者clip是默认值,即“不显示省略标记,只是简单的裁切”;

    后者ellipsis意思是“对象内文本溢出时显示省略标记(...)”。

    但是当使用了text-overflow:ellipsis;以后,在ie下显示是正确的,超出部分为省略号...,而在firefox中超出部分却是裁切掉了,这是因为firefox不支持text-overflow:ellipsis;属性。

     

    解决办法如下:(例子如下)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>
    <style>
    *{
    font-size:12px;
    padding:0;
    margin:0;
    }

    .main_leftlist a{
    180px;
    padding:0 0 0 5px;
    display: block;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    -moz-binding:
     url('ellipsis.xml#ellipsis');

    }

    </style>
    </head>

     

    <body> 

    <table width="30%" cellspacing="0" class="club01_tab">
          <tbody>

            <tr>  
              <td><div class="main_leftlist"><a href="#">图说中国少年儿童百科全书-下卷</a></div></td>

             </tr>

            <tr>  
              <td><div class="main_leftlist"><a href="#">图说中国少年儿童百科全书-下卷</a></div></td>

             </tr>

            <tr>  
              <td><div class="main_leftlist"><a href="#">图说中国少年儿童百科全书-下卷</a></div></td>

             </tr>

         </tbody>

     </table>

    </body>

     

     

    注明:

    url('ellipsis.xml#ellipsis');(注意路径)引用的是外部名为ellipsis.xml的文件,这是个固定写法。

     

    ellipsis.xml文件的内容为:

     

    <?xml version="1.0"?>
    <bindings xmlns="http://www.mozilla.org/xbl" xmlns:xbl="http://www.mozilla.org/xbl" xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"><binding id="ellipsis"><content><xul:window><xul:description crop="end" xbl:inherits="value=xbl:text"><children/></xul:description></xul:window></content></binding></bindings>

  • 相关阅读:
    基础DP背包
    哲学思絮01
    Vue使用ElementUI
    Vue-Mock数据
    Vue生命周期
    Vue实战之CURD
    读《间客》有感
    ASP.Net Core网站发布
    Cycling之 标签化
    Vue环境搭建
  • 原文地址:https://www.cnblogs.com/ywwloveys/p/3248124.html
Copyright © 2011-2022 走看看