zoukankan      html  css  js  c++  java
  • html表格内容自动换行


    有时候表格会因为内容多少忽大忽小的很烦人,在网上搜了下解决方案,效果不错哦,给大家分享下!
    首先介绍两个利器:
    table-layout:fixed //固定表格大小
    word-break:break-all;//字符串自动换行
     
    注意:IE和firefox是有很大区别的!(我就是栽在这个上面了,⊙﹏⊙b汗)
    1. (IE浏览器)使用 table-layout:fixed;强制table的宽度,多余内容隐藏
    <table style="table-layout:fixed" width="200">
     
    2.(IE浏览器)使用 table-layout:fixed;强制table的宽度,内层td,th采用word-break : break-all;或者word-wrap : break-word ;换行
    <table width="200" style="table-layout:fixed;">
    <tr>
    <td width="25%" style="word-break : break-all; ">abcdefghigklmnopqrstuvwxyz 1234567890
     
    3.(Firefox浏览器)连续的英文字符和阿拉伯数字的断行,Firefox的所有版本的没有解决这个问题,我们只有让超出边界的字符隐藏或者,给容器添加滚动条
     
    4.(Firefox浏览器)使用 table-layout:fixed;强制table的宽度,内层td,th采用word-break : break-all;或者word-wrap : break-word ;换行,使用overflow:hidden;隐藏超出内容,这里overflow:auto;无法起作用
    <table style="table-layout:fixed" width="200">
    <tr>
    <td width="25%" style="word-break : break-all; overflow:hidden; ">abcdefghigklmnopqrstuvwxyz1234567890</td>
  • 相关阅读:
    20款最优秀的JavaScript编辑器
    清空windows系统网络配置
    如何禁止Chrome浏览器隐藏URL的WWW前缀
    EDK2开发环境搭建
    edk2中子目录介绍
    INTEL_BIOS 编译—for-ATOM_E3800
    英特尔vPro博锐技术激活
    gitea configure
    mpeg1、mpeg2和mpeg4标准对比分析和总结
    内置缓存
  • 原文地址:https://www.cnblogs.com/grimm/p/5097895.html
Copyright © 2011-2022 走看看