随笔 - 547  文章 - 213 评论 - 417 阅读 - 107万

  1. Div
    1. IE
      1. white-space:normal (standard)

        Example:

        #wrapDiv{white-space:normal; width:100px; }

        <div id="wrapDiv">timeislifetimeislifetimeislifetimeislifetimeislifetimeislife</div>

      2. word-break:break-all(got from Word)

        Example:

        #wrapDiv{ word-break:break-all; width:100px; }

        <div id="wrapDiv">timeislifetimeislifetimeislifetimeislifetimeislifetimeislife</div>

    2. FireFox

      There is no better solution, the solution is similar to IE, just add a overflow:hidden or overflow:auto. For instance:

      1.  

        #wrapDiv{white-space:normal; width:100px; overflow:hidden }

        <div id="wrapDiv">timeislifetimeislifetimeislifetimeislifetimeislifetimeislife</div>

      2.  

        #wrapDiv{ word-break:break-all; width:100px; overflow:hidden }

        <div id="wrapDiv">timeislifetimeislifetimeislifetimeislifetimeislifetimeislife</div>

       

  2. Table
    1. IE: table-layout:fixed + nowrap(optional)
      1. Example1:

        <style type="text/css">

        .TableAutoWrap1

        {

            table-layout:fixed;

        }

         

        </style>

         

        <table class="TableAutoWrap1" width="100">

        <tr><td>

        </td>timeislifetimeislifetimeislife are you sure</tr>

        </table>

      2. Example2:

        <style type="text/css">

        .TableAutoWrap1

        {

            table-layout:fixed;

        }

         

        </style>

         

        <table class="TableAutoWrap1" width="100">

        <tr><td>

        </td nowrap>timeislifetimeis lifetimeis lifeareyousure</tr>

        </table>

      3. Example3:

        <style type="text/css">

        .TableAutoWrap1

        {

            table-layout:fixed;

        }

         

        </style>

         

        <body>

         

        <table class="TableAutoWrap1" width="100">

        <tr><td>

        </td nowrap width="50%">timeislife timeis lifetimeis lifeareyousure<td></td></tr>

        </table>

    2. FireFox: table-layout:fixed + nowrap(optional) + div

      So far, there is no good solution for Fixfox, the only workaround is to hide the overflowed text, and the td's width must use percentage instead of absolute width.

      For example:

      <style>

      .tableAutoWrap {table-layout:fixed}

      .td1 {overflow:hidden;}

      </style>

       

      <table class="tableAutoWrap" width=80>

      <tr><td width=25% class="td1" nowrap>

      <div>ttimeislifetimeislifet imeislifeimeislife</div>

      </td>

      <td class="td1" nowrap><div>ttimeislifetimeislifet imeislifeimeislife</div></td>

      </tr>

      </table>

       

      Note: all the foregoing solution will only be word-wrap (line-wrap) at the blank of a string of long characters, if you want to make the word-wrap occurs at every position where the length of the characters exceed the line width, you can use the following CSS element:

      <style type="text/css">

      .textarea1

      {

          overflow:hidden;

      }

      </style>

       

<textarea class="textarea1" cols="10" rows="4">ccccccccccccccccccccccccccc</textarea>

posted on   今夜太冷  阅读(608)  评论(0编辑  收藏  举报
编辑推荐:
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
阅读排行:
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· Open-Sora 2.0 重磅开源!
· 周边上新:园子的第一款马克杯温暖上架
点击右上角即可分享
微信分享提示