zoukankan      html  css  js  c++  java
  • 连续字符换行及单行溢出点点点显示

    1. 让连续的英文数字字符换行显示 word-break: break-all;

    2. 让单行文字超出的时候使用点点点表示
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;

    3. 2行示例代码

    display: -webkit-box; 
    /* height: 36px; line-height: 18px; */ 
    -webkit-line-clamp: 2; 
    -webkit-box-orient: vertical; 
    overflow: hidden;
    

    但是,如果是自适应的表格中,我们要实现上面两个效果,可能就会遇到挫折
    例如,连续的英文字符会撑开单元格,而无视其外部的宽度设置,以及单行文字溢出点点点效果也会无效,因为单元格的流动性,使得文字根本就不存在溢出这种说法。
    如果解决这个问题呢?实际上很简单,给最外面的table标签增加一个声明:

    table-layout: fixed;

    table-layout: fixed的作用在于,让表格布局固定,也就是表格的宽度不是跟随单元格内容多少自动计算尺寸。

    兼容IE6+
    以后,大家或多或少,或者已经开始使用表格相关display属性帮助构建web页面了,总会遇到类似的连续英文字符不换行,或者单行文字溢出没有效果的。此时,您就可以想到table-layout: fixed这厮。您可以试试:

    display:table; 100%; table-layout:fixed;
    
  • 相关阅读:
    1、数据加密基础
    cookie——小甜品
    使用SpringBoot开发REST服务
    从编辑距离、BK树到文本纠错
    360影视视频下载
    从Trie树到双数组Trie树
    使用websocket-sharp来创建c#版本的websocket服务
    OFFICE 文档转换为html在线预览
    IDEA+PHP+XDebug调试配置
    HTML5录音控件
  • 原文地址:https://www.cnblogs.com/xjuan/p/5446138.html
Copyright © 2011-2022 走看看