介绍
本篇内容介绍了“css如何实现自动换行”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!
正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的空白:正常,当定义的宽度之后自动换行
html
代码如下:
& lt; div id=皐rap"在正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的空白:正常,当定义& lt;/div>
css
代码如下:
#包装{空白:正常;宽度:200 px;}
1。(即浏览器)连续的英文字符和阿拉伯数字,使用自动换行:break-word;或者单词分割:打破所有;实现强制断行
代码如下:
#包装{单词分割:打破所有;宽度:200 px;}
或者
#包装{自动换行:break-word;宽度:200 px;}
& lt; div id=皐rap"祝辞abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111
效果:可以实现换行
2。(Firefox浏览器)连续的英文字符和阿拉伯数字的断行,Firefox的所有版本的没有解决这个问题,我们只有让超出边界的字符隐藏或者,给容器添加滚动条
代码如下:
#包装{单词分割:打破所有;宽度:200 px;溢出:汽车;}
& lt; div id=皐rap"祝辞abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111
效果:容器正常,内容隐藏
对
于表1。(即浏览器)使用表布局:固定;强制表格的宽度,多余内容隐藏
代码如下:
& lt;表,宽度=?00“比;
& lt; tr>
& lt; td> abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss
& lt;/td>
& lt;/tr>
& lt;/table>
效果:隐藏多余内容
2。(即浏览器)使用表布局:固定;强制表格的宽度,内层td, th采用单词分割:打破所有,或者自动换行:break-word;换行
代码如下:
& lt;表宽度=?00”;比;
& lt; tr>
& lt; td宽度=?5%”;祝辞abcdefghigklmnopqrstuvwxyz 1234567890
& lt;/td>
& lt; td祝辞abcdefghigklmnopqrstuvwxyz 1234567890
& lt;/td>
& lt;/tr>
& lt;/table>
效果:可以换行
3。(即浏览器)在td,中嵌套div、p等采用上面提到的div, p的换行方法
4。(Firefox浏览器)使用表布局:固定;强制表格的宽度,内层td, th采用单词分割:打破所有,或者自动换行:break-word;换行,使用溢出:隐藏;隐藏超出内容,这里溢出:汽车;无法起作用
代码如下:
& lt;表,宽度=?00“比;
& lt; tr>
& lt; td宽度=?5%”;祝辞abcdefghigklmnopqrstuvwxyz1234567890
& lt; td宽度=?5%”;祝辞abcdefghigklmnopqrstuvwxyz1234567890
& lt;/tr>
& lt;/table>
效果:隐藏多于内容
5。(Firefox浏览器)在td, th中嵌套div、p等采用上面提到的对付Firefox的方法
运行代码框
最后,这种现象出现的几率很小,但是不能排除网友的恶搞。
下面是提到的例子的效果
代码如下:
& lt; !DOCTYPE html公众“-//W3C XHTML 1.0//DTD//EN"过渡;“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"比;
& lt; html xmlns=癶ttp://www.w3.org/1999/xhtml"比;
& lt; head>
& lt;元http-equiv=癈ontent-Type"内容=皌ext/html;charset=gb2312"/比;
& lt; title>字符换行& lt;/title>
& lt;风格类型=拔谋?css"比;
表、td th, div{边界:1 px绿色固体;}
代码{字体类型:“快递New"、快递等宽字体;}
& lt;/style>
& lt;/head>
& lt; body>
& lt; h2> & lt; code> div & lt;/h2>
& lt; h2> & lt; code>所有空白:正常;& lt;/code> & lt;/h2>
& lt; div祝辞自动换行仍然发生在td元素,其宽度属性设置为一个值小于细胞的打开内容,即使noWrap属性设置为true}。因此,宽度属性优先于noWrap财产在这个scenario<}/div>
& lt; h2> & lt; code>即\自动换行:break-word; & lt;/code> & lt;/h2>
& lt; div祝辞abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111
