链接a的title属性中的文字换行

时间: 2010-6-14 - 分类: Html+CSS - 评论: 1 - 阅读: 197 次

啥也不说,先上个图

我们都知道,可以给链接a加上title属性,这样鼠标移动上去会显示title属性定义的文字,常常用来加一些提示语句,比如说点击查看详情之类的,代码形如:

<a href=”#” title=”点击查看详情”>链接xx</a>

。之前一直没有仔细注意过这个东西。如果鼠标浮动上去要显示更多东西的话,怎么实现呢。第一反应是jquery的tooltip插件。今天无意中发现某个学院的网站鼠标移动上去可以显示这么完整的信息,效果看起来似乎还可以,就想看看怎么做的,找了下,没发现有Javascript脚本,再往链接的地方一看,终于让我发现了门道了:

<a href='#' target="_blank" title="标题: 关于对我校2006年至2009年发展党员工作情况进...
 &#13;发布日期: 2010-5-31 16:05:08&#13;类别:院务通知&#13;点击: 139">
 [05-31]&nbsp;&nbsp;关于对我校2006年至2009年发展党员工作情况进...
 </a>

注意到了吗。。很简单,只要使用&#13;这样的转义符号,即可实现换行。在一些tooltip要求定制性不高的情况下,这样的显示效果相当不错,而且是浏览器原生的效果,安逸。

哎,虽然号称精通div+css,但是发现一些小小但是很实用的技巧自己还不知道,看来html还有很多东西可以挖掘。

1个评论

  1. redky - 2010年8月23日 10:48 上午

    这个只有在ie下可以使用;
    并且 可以直接使用回车代替;

发表评论