zoukankan      html  css  js  c++  java
  • css对html中表格单元格td文本过长的处理

    参考 http://www.cnblogs.com/lekko/archive/2013/04/30/3051638.html

      http://www.zhangxinxu.com/wordpress/?p=4105

    只关注实现其效果的css属性,暂无视浏览器兼容性。

    table{
    	table-layout: fixed;
    }
    .autocut{
    	200px;
    	overflow: hidden;
    	white-space:nowrap;
    	text-overflow: ellipsis;
    }
    .autocut:hover{
    	overflow: visible;
    	white-space: normal;
    	word-wrap: break-word;
    }
    

    分别看一下达到其效果的属性:

    table-layout: fixed;
    

    让表格布局固定,也就是表格的宽度不是跟随单元格内容多少自动计算尺寸。

    overflow: hidden;
    

     让溢出的内容被裁剪,使其不可见。

    white-space: nowrap
    

     不折行显示。

    text-overflow: ellipsis;
    

     溢出文本显示省略标记...

    overflow: visible;
    

     溢出文本可见,正常显示。

    white-space: normal;
    

     默认。空白会被浏览器忽略。这个不是很理解

    word-wrap: break-word;
    

     在长单词或 URL 地址内部进行换行。

  • 相关阅读:
    sed命令
    python常用库
    python标准库
    从 Python 打包到 CLI 工具
    pip
    python包自我理解
    docker常用命令
    chattr命令
    xmss
    live2d-widget.js
  • 原文地址:https://www.cnblogs.com/piaomiao1314/p/4045323.html
Copyright © 2011-2022 走看看