介绍
这篇文章主要介绍”css表格单元格中的长文本怎么实现自动换行”,在日常操作中,相信很多人在css表格单元格中的长文本怎么实现自动换行问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答“css表格单元格中的长文本怎么实现自动换行”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!
自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,挺让人头疼。下面介绍的是CSS如何实现换行的方法
对于div、p等块级元素
正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的空白:正常,当定义的宽度之后自动换行
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的方法
运行代码框
最后,这种现象出现的几率很小,但是不能排除网友的恶搞。
到此,关于“css表格单元格中的长文本怎么实现自动换行”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注网站,小编会继续努力为大家带来更多实用的文章!
