HTML如何换行_随笔

需要准备的材料分别有：电脑、浏览器、html编辑器。

1、首先，打开html编辑器，新建html文件，例如：index.html，编写问题基础代码。

2、在index.html中的<body>标签中，将外层的table改为div，新增css代码：div {width: 300px} table {float: left}。

3、浏览器运行index.html页面，此时表格们实现了每3个自动换行。

对于div,p等块级元素

正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义的宽度之后自动换行。

1.（IE浏览器）连续的英文字符和阿拉伯数字,使用word-wrap : break-word 或者word-break:break-all实现强制断行

效果：可以实现换行

2.（Firefox浏览器）连续的英文字符和阿拉伯数字的断行,Firefox的所有版本的没有解决这个问题,我们只有让超出边界的字符隐藏或者,给容器添加滚动条

效果：容器正常，内容隐藏

对于table

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

abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss

效果：隐藏多余内容

2.(IE浏览器)使用 table-layout:fixed强制table的宽度,内层td,th采用word-break : break-all或者word-wrap : break-word 换行

效果：可以换行

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无法起作用

效果：隐藏多余内容

5.(Firefox浏览器) 在td,th中嵌套div,p等采用上面提到的对付Firefox的方法

运行代码框

最后，这种现象出现的几率很小，但是不能排除网友的恶搞。

<!DOCTYPE HTML>

<html>

<head>

<title>无标题文档</title>

<style>

</style>

</script>

</head>

<body>

<p style="width:20pxheight:100pxbackground-color:#069">你好你好你好你好你好你好你好你好你好你好</p>

</body>

</html>

word-wrap : normal | break-word

参数：

normal : 允许内容顶开指定的容器边界

break-word : 内容将在边界内换行。如果需要，词内换行（word-break）也行发生

欢迎分享，转载请注明来源：内存溢出

HTML如何换行