zoukankan      html  css  js  c++  java
  • HTML连续英文字符串强制换行

    如果想要一个table固定大小,里面的文字强制换行(尤其是在一长串英文文本,并且中间无空格分隔的情况下),以达到使过长的文字不撑破表格的目的,一 般是使用样式:table-layout:fixed。但是在Firefox下面,会有一些问题,参考Gmail的一些做法,做了几个测试,得出一种解决 办法。

    如 果想要一个table固定大小,里面的文字强制换行(尤其是在一长串英文文本,并且中间无空格分隔的情况下),以达到使过长的文字不撑破表格的目的,一般 是使用样式:table-layout:fixed。但是在Firefox下面,会有一些问题,参考Gmail的一些做法,做了几个测试,得出一种解决办 法。

    例1:(IE浏览器)普通的情况

    <table border=1 width=80>

    <tr>

    <td>abcdefghigklmnopqrstuvwxyz 1234567890

    </td>

    </tr>

    </table>
    效果:
    可以看到width=80并没有起作用,表格被字符撑开了。

    例2:(IE浏览器)使用样式table-layout:fixed

    <style>

    .tbl {table-layout:fixed}

    </style>



    <table class=tbl border=1 width=80>

    <tr>

    <td>abcdefghigklmnopqrstuvwxyz 1234567890

    </td>

    </tr>

    </table>
    效果:
    width=80起作用了,但是表格换行了。

    例3:(IE浏览器)使用样式table-layout:fixed与nowrap

    <style>

    .tbl {table-layout:fixed}

    </style>



    <table class=tbl border=1 width=80>

    <tr>

    <td nowrap>abcdefghigklmnopqrstuvwxyz 1234567890

    </td>

    </tr>

    </table>
    效果:
    width=80起作用了,换行也被干掉了。

    例4:(IE浏览器)在使用数值固定td大小情况下使用样式table-layout:fixed与nowrap

    <style>

    .tbl {table-layout:fixed}

    </style>



    <table class=tbl border=1 width=80>

    <tr>

    <td width=20 nowrap>abcdefghigklmnopqrstuvwxyz 1234567890

    </td>

    <td nowrap>abcdefghigklmnopqrstuvwxyz 1234567890

    </td>

    </tr>

    </table>
    效果:
    不幸发生了,第一个td的nowrap不起作用了

    例5:(IE浏览器)在使用百分比固定td大小情况下使用样式table-layout:fixed与nowrap

    <style>

    .tbl {table-layout:fixed}

    </style>



    <table class=tbl border=1 width=80>

    <tr>

    <td width=25% nowrap>abcdefghigklmnopqrstuvwxyz 1234567890

    </td>

    <td nowrap>abcdefghigklmnopqrstuvwxyz 1234567890

    </td>

    </tr>

    </table>
    效果:
    改成百分比,终于搞定了

    例6:(Firefox浏览器)在使用百分比固定td大小情况下使用样式table-layout:fixed与nowrap效果:
    把例5放到firefox下面,又ft了

    例7:(Firefox浏览器)在使用百分比固定td大小情况下使用样式table-layout:fixed与nowrap,并且使用div

    <style>

    .tbl {table-layout:fixed}

    .td {overflow:hidden;}

    </style>



    <table class=tbl border=1 width=80>

    <tr>

    <td width=25% class=td nowrap>

    <div>abcdefghigklmnopqrstuvwxyz 1234567890</div>

    </td>

    <td class=td nowrap>

    <div>abcdefghigklmnopqrstuvwxyz 1234567890</div>

    </td>

    </tr>

    </table>
    效果:
    天下终于太平了

    例8:(Firefox浏览器)在使用数值固定td大小情况下使用样式table-layout:fixed与nowrap,并且使用div

    <style>

    .tbl {table-layout:fixed}

    .td {overflow:hidden;}

    </style>



    <table class=tbl border=1 width=80>

    <tr>

    <td width=20 class=td nowrap>

    <div>abcdefghigklmnopqrstuvwxyz 1234567890</div>

    </td>

    <td class=td nowrap>

    <div>abcdefghigklmnopqrstuvwxyz 1234567890</div>

    </td>

    </tr>

    </table>
    效果:
    nowrap又不起作用了

    最终,例7是一个在IE和Firefox都可以完美解决页面强制换行问题的解决方案。

    Reference: http://www.simplelife.cn/blog/index.php?op=ViewArticle&articleId=115&blogId=1



  • 相关阅读:
    10000台不稳定机器如果做爬虫
    python 豆瓣高分电影爬虫
    恶意爬虫让机票价格暴涨 每年或致航空公司损失十多亿元
    python 豆瓣高分电影爬虫
    Python 爬虫保存图片
    你的爬虫票价价格暴涨
    10分钟教你利用Python网络爬虫获取穷游攻略
    10分钟教你利用Python网络爬虫获取穷游攻略
    SAP Cloud for Customer 如何直接消费S/4HANA API
    如何分辨 SAP Fiori Launchpad 里的真假 Fiori 应用
  • 原文地址:https://www.cnblogs.com/emanlee/p/1205043.html
Copyright © 2011-2022 走看看