如何让长长的url自动换行呢。一下是一个方法
举个例子来说明:
使用: <wbr>, ​ and ­ 的其中一个在有可能要分开的字符后面。浏览器就会按需要换行。
原始的代码:
<div style="width:200px; border:1px solid #000000;"> http://www.abcdef.com/aaaaa/bbbbb/ccccc/ddddd/eeeee/ffff/ggg/index.htm </div>
使用<wbr>的html代码
<div style="width:200px; border:1px solid #000000;"> http:<wbr>/<wbr>/<wbr>www.abcdef.com/<wbr>aaaaa/<wbr>bbbbb/<wbr>ccccc/<wbr>ddddd/<wbr>eeeee/<wbr>ffff/<wbr>ggg/<wbr>index.htm </div>
使用​的html代码
<div style="width:200px; border:1px solid #000000;"> http:​/​/​www.abcdef.com/​aaaaa/​bbbbb/​ccccc/​ddddd/​eeeee/​ffff/​ggg/​index.htm </div>
使用­的html代码
<div style="width:200px; border:1px solid #000000;"> http:­/­/­www.abcdef.com/­aaaaa/­bbbbb/­ccccc/­ddddd/­eeeee/­ffff/­ggg/­index.htm </div>
参考的html代码 <div style="width:200px; border:1px solid #000000;"> 123 456 789 123 456 789 123 456 </div>
把以上的代码保存为html文件,就可以看到效果。特别是ie。
<wbr>, ​ 和 ­在ie和firefox通过。
​在chrome通过。而<wbr> 和 ­没有在chrome测试过。
注:没有在中文环境下测试过。编码使用的是utf-8。 |