HTML技巧汇总-优快云博客

本文链接：https://blog.youkuaiyun.com/iteye_5008/article/details/82088015

本文介绍了HTML中的几个实用技巧，包括如何让单元格内的文本自动换行、使用br标签的clear属性来控制文本流的位置、在title属性中实现换行以及使图片在页面中水平和垂直居中的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

w3school Web 技术教程

http://www.w3school.com.cn/

一、HTML td 自动换行命令

HTML td 自动换行命令

<td colspan="2" style="word-break:break-all"><font color="#FF0000"><xsl:value-of select="root/lang/body/nightModeText" /></font></td>

上面的程序nightModeText是一段英文我添加style="word-break:break-all之后在IE6/7上都可以显示自动换行，IE8却显示不了怎么兼容IE8，用什么命令？

给长地址的单元格应用样式：
word-wrap: break-word;word-break:break-all;

二、HTML br 的 clear 属性

    通常情况下，<br> 标签会告诉浏览器立即停止当前的文本流，并在下一行的左边，或者在左对齐的内联图形或表格的右边开始继续输出文本流。

    但是有时候，您也许希望当前的文本流在当前左边或右边的内联表格或图像的下面一行继续输出。

     HTML 4 和 XHTML 通过 <br> 标签提供了这样的功能。它可以具有三个值：left、right 或者 all，每个值都代表一个边界或两边的边界。当指定的边界没有图像时，浏览器才会继续输出文本。

提示和注释

提示：一般情况下，文本流中的其他行会在内联图像的底部显示，除非图形的 <img> 标签被设置为左对齐或右对齐（对于 <table> 标签也一样）。因此，<br> 标签的 clear 属性只对这些左对齐或右对齐的图像或表格起作用。

参照 http://www.w3school.com.cn/tags/tag_br_prop_clear.asp

例子：

http://www.ncku.edu.tw/~iteach/chia/cnc_course/dw4/dw4-2/br-clear.htm

<html>
<head>
<title>Example of &lt;br clear&gt;</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body bgcolor="#FFFFFF" text="#000000">
    <p>
        National Cheng Kung University, Computer and Network Center.
        National Cheng Kung University, Computer and Network Center. <img
            src="img/blueball.gif" width="30" height="30" align="left"><img
            src="img/cnc-for-repeat.gif" width="90" height="60"
            align="right"><font color="#6699CC"><b>&lt;br
                clear=left&gt;</b></font><br clear=left> National Cheng Kung
        University, Computer and Network Center. National Cheng Kung
        University, Computer and Network Center. National Cheng Kung
        University, Computer and Network Center. National Cheng Kung
        University, Computer and Network Center. National Cheng Kung
        University, Computer and Network Center. National Cheng Kung
        University, Computer and Network Center.
    </p>
    <p>
        National Cheng Kung University, Computer and Network Center.
        National Cheng Kung University, Computer and Network Center. <img
            src="img/cnc-for-repeat.gif" width="90" height="60"
            align="left"><font color="#6699CC"><b><img
                src="img/blueball.gif" width="30" height="30"
                align="right">&lt;br clear=right&gt;<br
                clear=right> </b></font>National Cheng Kung University,
        Computer and Network Center. National Cheng Kung University,
        Computer and Network Center. National Cheng Kung University,
        Computer and Network Center. National Cheng Kung University,
        Computer and Network Center. National Cheng Kung University,
        Computer and Network Center. National Cheng Kung University,
        Computer and Network Center.
    </p>
    <p>
        National Cheng Kung University, Computer and Network Center.
        National Cheng Kung University, Computer and Network Center. <img
            src="img/cnc-for-repeat.gif" width="90" height="40"
            align="left"><font color="#6699CC"><b><img
                src="img/blueball.gif" width="60" height="60"
                align="right">&lt;br clear=all&gt;<br clear=all>
        </b></font>National Cheng Kung University, Computer and Network Center.
        National Cheng Kung University, Computer and Network Center.
        National Cheng Kung University, Computer and Network Center.
        National Cheng Kung University, Computer and Network Center.
        National Cheng Kung University, Computer and Network Center.
        National Cheng Kung University, Computer and Network Center.
    </p>
</body>
</html>

三、html 中 title 标签换行的方法集

用转义符实现换行(&#10)、(&#13)、(&#xd)

<a   href="#" title="第一行&#10;第二行">title换行</a>
<a   href="#" title="第一行&#13;第二行">title换行</a>
<a   href="#" title="第一行&#xd;第二行">title换行</a>

四、html 中 img 标签垂直，水平居中

水平居中的话就在img所在的标签设置：text-align:center
垂直居中的话就在img上设置：vertical-align:middle

<div style="text-align:center; width:100px; height:40px;"><img src="图片" style="vertical-align:middle;" width="16" height="16" /></div>

html 相关问题

一、HTML td 自动换行命令

二、HTML br 的 clear 属性

三、html 中 title 标签换行的方法集

四、html 中 img 标签 垂直，水平 居中

四、html 中 img 标签垂直，水平居中