zoukankan      html  css  js  c++  java
  • td之overflow:hidden 多余文本隐藏效果

    td之overflow:hidden 多余文本隐藏效果

    方法1: table-layout: fixed; 200px;

    语法: table-layout : auto | fixed

    • auto : 默认的自动算法。布局将基于各单元格的内容。表格在每一单元格读取计算之后才会显示出来。速度很慢
    • fixed : 固定布局的算法。在这算法中,水平布局是仅仅基于表格的宽度,表格边框的宽度,单元格间距,列的宽度,而和表格内容无关

    隐藏对象内的多余文本,一般做法:

    selector{ 200px; white-space:nowrap; overflow:hidden; } 
    

    但是这段代码用在td上不会生效,单元格依然会被撑开~;
    解决办法:同时为其table定义*; table-layout : fixed OK:多余文本已经被自动隐藏。

    <head>
        <title>回头来看看Table:TD也玩overflow:hidden</title>
        <style type="text/css">
            table { 500px;table-layout:fixed; }
            .col1 { 100px; }
            .col2 { 200px; }
            .col3 { 100px; }
            td {white-space:nowrap;overflow:hidden;}
            </style>
        </head>
    <body>
        <table border="1" cellspacing="0" summary="测试">
            <tr>
                <td class="col1"><strong>产品名称</strong></td>
                <td class="col2"><strong>产品介绍</strong></td>
                <td class="col3"><strong>产品备注</strong></td>
            </tr>
            <tr>
                <td>神舟 优雅Q400N</td>
                <td><a href="shou_2.htm">优雅处理器优雅处理器优雅处理器优雅处理器优雅处理器优雅处理器优雅处理器优雅处理器优雅处理器优雅处理器优雅处理器优雅处理器优雅处理器优雅处理器优雅处理器优雅处理器优雅处理器优雅处理器优雅处理器优雅处理器</a></td>
                <td>迅驰4平台,突出的性价比,漂亮的外观</td>
            </tr>
        </table>
    </body>
    

    方法2: 在td内加个div,td定义宽度,然后div只要定义高度就可以了。如:

        td{  200px; }
        td .inner-div{ height:25px; line-height:25px;white-space:nowrap; overflow:hidden;  text-overflow:ellipsis; }
  • 相关阅读:
    ROS编程中使用rosed编写代码
    ROS中.launch文件的remap标签详解
    Ubuntu下网易云音乐无法联网的解决办法
    双舵轮AGV里程计、运动控制核心算法
    PID参数调整的口诀
    altium designer生成gerber步骤
    SLAM FOR DUMMIES 第5-8章 中文翻译
    SLAM for Dummies SLAM初学者教程 中文翻译 1到4章
    有关ros::spin()和ros::spinonce()若干感受
    ROS,launch学习
  • 原文地址:https://www.cnblogs.com/stephenykk/p/5406609.html
Copyright © 2011-2022 走看看