Line-wrap(word-wrap) in CSS

最新推荐文章于 2019-09-28 00:06:29 发布

转载最新推荐文章于 2019-09-28 00:06:29 发布 · 108 阅读

·

0

·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/time-is-life/archive/2008/01/21/1046908.html

本文介绍了在不同浏览器中实现文本自动换行的方法，包括使用CSS属性white-space、word-break及table布局等技巧，并针对IE和Firefox提供了具体示例。

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>
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>

转载于:https://www.cnblogs.com/time-is-life/archive/2008/01/21/1046908.html

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。