所有分类
  • 所有分类
  • 后端开发
关于英文单词以及汉字强制换行

关于英文单词以及汉字强制换行

运行环境:Windows
所需软件:Word
资源类型:简历

对于自动换行问题,正常字符的换行是合理的,而连续的数字和英文字符往往会扩大容器,这让人头疼。以下是CSS如何实现换行。
对于div,p等块级元素正常文本(亚洲文本和非亚洲文本)元素有默认的whitete-space:normal,定义宽度后,自动换行html。
<div id=”wrap”>正常文本(亚洲文本和非亚洲文本)元素有默认的whitete-space:normal,当定义</div>。

css

#wrap{white-space:normal; width:200px; }

1、使用word(IE浏览器)连续英文字符和阿拉伯数字-wrap : break-word ;或word-break:break-all;实现强制断行

#wrap{word-break:break-all; width:200px;}

或者

#wrap{word-wrap:break-word; width:200px;}

<div id=”wrap”>abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>
效果:可实现换行。

2、Firefox浏览器)连续英文字符和阿拉伯数字断开,Firefox的所有版本都没有解决这个问题。我们只需要隐藏超越边界的字符或向容器添加滚动条
Firefox3.wordd可用于6中测试-wrap:break-word强制换行,但word-break:break-all;仍无效

#wrap{word-break:break-all; width:200px; overflow:auto;}

<div id=”wrap”>abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>

效果:容器正常,内容隐藏。

对table而言

1. (IE浏览器)使用 table-layout:fixed;强制table的宽度,隐藏多余的内容

<table style="table-layout:fixed" width="200">
<tr>
<td>ssssssssssssssssssssssssssssss
</td>
</tr>
</table>

效果:隐藏多余的内容

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
</td>
<td style="word-wrap : break-word ;">abcdefghigklmnopqrstuvwxyz 1234567890
</td>
</tr>
</table>

效果:可以换行

3. (IE浏览器)在td、th中嵌套div、p等,采用上述div、p的换行方法。
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; ">abcdefghigklmnopqrstuvwyz1245689</td>
<td width="75%" style="word-wrap : break-word; overflow:hidden; ">abcdefghigklmnopqrstuvwyz1245689</td>
</tr>
</table>

效果:比内容更隐藏

5.(Firefox浏览器) div嵌套在td、th中,p采用上述处理firefox的方法。

原文链接:https://www.icz.com/technicalinformation/web/html/2023/05/8861.html,转载请注明出处~~~
0
注意:请收藏好网址www.icz.com,防止失联!站内免费资源持续上传中…!赞助我们
显示验证码
没有账号?注册  忘记密码?