firefox和IE下，title元素无法换行的替换方式-优快云博客

本文详细探讨了在HTML页面上使用title属性显示消息时遇到的浏览器兼容性问题，包括如何在IE和Firefox下实现换行显示，并提供了一种使用CSS控制换行的替代方案。通过实例展示了不同浏览器下的显示效果，以及如何在后台和前端进行代码调整以确保兼容性和美观。

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

今天写代码，需要在页面上提示消息，为了省事，没有使用第三方的tip插件，想直接用html元素的title来显示。

结果悲剧了，发现实现不了，该死的浏览前兼容问题又来了，IE下可以通过转义字符搞定，倒是火狐下死活不行, W3C规范，不惧强制效力啊～汗一把...唉，无奈只好用了替代方法：

原来程序：
后台封装数据程序：


for (String dtcID : rtEcPackage.getErrorCodeIDList()) {

   sb.append(dtcID + " - ");
   // &#10也可以, 但不能用<br/>,否则页面输出有问题
   sb.append(DtcMessageConfigBoundle.getMessage(dtcID) + "
");
}

前台js显示输出：


html += "<div id='" + key + "' class='carImg' title='" + value.dtcMsg + "'> 
     + "A:<img src='" + $.webPathresources/images/demo/car1.jpg' class='carIcon'
     />" + key+ "</div>";
});

// 后台不能用<br/>,否则生成的代码有问题，IE和火狐下都自动加了结束符</div>
<div title="P3045 - Undefined DTC<br></div>" class="carImg" id="SZ00">
    A:<img class="carIcon" src="http://127.0.0.1:8080/ams/resources/images/demo/car1.jpg">SZ00
</div>
// 实际应该是这样
<div title="P3045 - Undefined DTC<br/>" class="carImg" id="SZ00">
    A:<img class="carIcon" src="http://127.0.0.1:8080/ams/resources/images/demo/car1.jpg">SZ00
</div>

后台使用<BR/>的提示效果，多了了</div>：

[img]http://dl.iteye.com/upload/attachment/0062/1867/d659f5c1-9d78-3c74-a51e-a7a22cb6e2dc.jpg[/img]

后台使用&#13或"&#10的提示效果--FF：

[img]http://dl.iteye.com/upload/attachment/0062/1869/b59ebc4b-1d03-3d51-acfd-b5f02056367e.jpg[/img]

后台使用&#13或"&#10的提示效果--IE：

[img]http://dl.iteye.com/upload/attachment/0062/1871/c342461e-6f18-3d50-aea4-007cd80016b4.jpg[/img]

替换方案，即加入CSS控制换行，同时不使用div的title，改用其他元素，如span元素来充当title

后台封装数据程序：


for (String dtcID : rtEcPackage.getErrorCodeIDList()) {

   sb.append(dtcID + " - ");
   // 可以使用BR
   sb.append(DtcMessageConfigBoundle.getMessage(dtcID) + "<br/>");
}

前台样式br：


/** title换行的替代方案，支持FF和IE*/
div.br span {
    display: none;
    border: 1px solid #000;
    text-decoration: none;
    background-color:#D1E9E9;
    position: absolute;
    padding: 3px;
    left: 60px;
    /** 最顶层显示 */
    z-index: 99;
    /** 半透明 */ /** IE **/
    filter: alpha(opacity = 90);
    /** 非IE **/
    opacity: 0.9;
}

div.br:hover span {
    display: block;
}

前台js显示输出：


html += "<div id='" + key + "' class='carImg br'>A:<img src='" + $.webPath 
     + "resources/images/demo/car1.jpg' class='carIcon'/>" + key
     + "<span id='titleTip'>" + value.dtcMsg + "</span></div>";
     // html += value; 
    // html += key;
});

替换方案的显示效果，IE和Firefox均ok：

[img]http://dl.iteye.com/upload/attachment/0062/1874/c7888e55-194c-3f5b-9a69-b25722fec600.jpg[/img]