zoukankan      html  css  js  c++  java
  • 表格里使用text-overflow后不能隐藏超出的文本的解决方法

      在w3cschool中css3中有个文本相关的属性text-overflow,当把它设为ellipsis时文本溢出内容就能显示为省略标记,而设为clip时就能把文本溢出的部分裁切掉,当然,前提是设置好两个属性,那就是white-space:nowrap(强制文本在一行内显示)及overflow:hidden(溢出内容为隐藏),也就是要同时有

    { 
    text-overflow:ellipsis或clip; 
    white-space:nowrap; 
    overflow:hidden; 
    } 
    

      如果不想出现省略号,就设定高度(高度为一行文字的高度),同时去掉white-space:nowrap (此方法如果标签是td的话ie8是不兼容的)

    {
         **px;
        height: **px;
        overflow: hidden; 
    }
    

      

      因为之前有用过不少次这个属性,而且用得也都很顺利,所以最近在弄一些table的时候遇到了td内的内容太多而出现换行从而影响整体的美观的问题,所以我想把文本不换行而且让超出的文本能显示为省略号,于是我就很自然的就去用了上面那三属性并且也为td设置了长度和宽度,结果神了奇,一直没把超出的文本内容给换成省略号,尝试排除了各种我觉得有可能的影响后依旧不能解决,于是我只好去google一下,后来终于找到了原因,就是要在table的样式里定义一个属性 table-layout:fixed,综上,要想解决表格里面使用text-overflow后依旧不能隐藏超出的文本的问题,就必须完整的使用下面这些属性 

    td{ 
    text-overflow:ellipsis或clip; 
    white-space:nowrap; 
    overflow:hidden; 
    **px; 
    } 
    table{ 
    table-layout:fixed; 
    } 
    

      也可以在td里面在嵌套一个span或div标签,在该标签上设置

    span{
        display: block;
         **px;
        height: **px;
        white-space: nowrap;
        overflow: hidden; 
        text-overflow: ellipsis;
    }

      还有如果想鼠标移动上去时显示被隐藏的文本内容,还可以设置

    td:hover 
    { 
    text-overflow:inherit; 
    overflow:visible; 
    } 
    

      

    ---------------------------------------------------------------------------------------------------------------------------------------------------------

      

    1、text-overflow: ellipsis; 

    这里的重点样式是  text-overflow: ellipsis; 

    不过话说text-ellipsis是一个特殊的样式,有关解释是这样的:text-overflow属性仅是注解,当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。要实现溢出时产生省略号的效果还须定义:强制文本在一行内显示(white-space:nowrap)及溢出内容为隐藏(overflow:hidden),只有这样才能实现溢出文本显示省略号的效果。

    简单理解就是我要把文本限制在一行(white-space: nowrap;),肯定这一行是有限制的(width),并且你的溢出的部分要隐藏起来(overflow: hidden;),然后出现省略号( text-overflow: ellipsis)。

    我在网上看到有很多人说opera不支持text-overflow,可能因为我用的是最新版本的,已经支持这个属性了,所以没办法测试,不过网上给支持低版本的opera一个办法,就是-o-text-overflow:ellipsis;

    2、white-space

    顺便解释一下white-space的用法

    white-space属性声明建立布局过程中如何处理元素中空白符。(废话一句,这里的空白符应该指我们用键盘敲入的空格或回车,因为用 或<br>无论white-space设置什么都会有空格或回车。)

    下面是wschool上white-space可能的值:

    normal 默认。空白会被浏览器忽略。

    pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。

    nowrap 文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。

    pre-wrap 保留空白符序列,但是正常地进行换行。

    pre-line 合并空白符序列,但是保留换行符。

    inherit 规定应该从父元素继承 white-space 属性的值。

  • 相关阅读:
    [055] SSL 3.0曝出Poodle漏洞的解决方式-----开发人员篇
    java中接口的定义与实现
    很好的理解遗传算法的样例
    Memory Architecture-SGA-Database Buffer Cache
    ActionScript3游戏中的图像编程(连载十七)
    MacOS的g++使用clang,默认不支持C++11多线程: no matching constructor for initialization of 'std::thread'
    bash代码
    delete
    nautilus-open-terminal右键随处打开终端
    删除系统多余内核
  • 原文地址:https://www.cnblogs.com/refe/p/5015211.html
Copyright © 2011-2022 走看看