`

html里title属性换行的方法

 
阅读更多
众所周知,对于链接和图片,我们可以通过添加title 属 性以显示一些说明文字,一般情况下,这些文字都是显示成一行,那么有没有办法让它以多行的方式显示呢?解决的方法有两种:

1.将title 属 性分成几行来写,例如:
<ahref=#"title ="说明一
说明二
说明 三">印象派</a>

2.第一行相对来说不够直观,我们还可以在需换行 的地方添加&#10;(将&改为 半角,下同)或&#13;来实现:
<ahref=#"title ="说明一&#10;说明二&#10;说 明三">印象派</a>
<ahref=#"title ="说明一&#13;说明二&#13;说 明三">印象派</a>

==================

response.write " title='标 题:" & rsArticleList("Title") & vbcrlf & "作 者:" & rsArticleList("Author") & vbcrlf & "转 贴 自:" & rsArticleList("CopyFrom") & vbcrlf & "更新时间:" & rsArticleList("UpdateTime") & vbcrlf
response.write "点 击 数:" & rsArticleList("Hits") & vbcrlf & "关 键 字:" & mid(rsArticleList("Key"),2,len(rsArticleList("Key"))-2) & vbcrlf & "推荐等级:"

直接换行就可以

=======================

<a href='/news/detail/159.html' target='_ablank' title='标 题:fadfasdf
作 者:佚名
转 贴 自:本站原创
更新时间:2007-3-14 10:31:00
点 击 数:0
关 键 字:fdafdddfa
推荐等级:无
分页方式:不分页
阅读等级:游客
阅读点 数:0'>fadfasdf</a>
<div title="123&quot;&#10;456">text</div>
<p><a href=#" title="说明一&#10;说明二&#10;说明三">印象派</a>
<a href=#" title="说明一&#13;说明二&#13;说明三">印象派</a></p>

===========================

function decodeHTML(fString)
if not isnull(fString) then
fString = replace(fString, "&gt;", ">")
fString = replace(fString, "&lt;", "<")

fString = Replace(fString, "&nbsp;", CHR(32))
fString = Replace(fString, "&nbsp;", CHR(9))
fString = Replace(fString, "&quot;", CHR(34))
fString = Replace(fString, CHR(39),"&#39;")
fString = Replace(fString, "</P><P> ",CHR(10) & CHR(10))
fString = Replace(fString, "<BR> ", CHR(10))
decodeHTML = fString
end if
end function

function encodeHtml()

替换成unicode字符就可以

end function

=================================

以下为转出网上

今天在写插件时,需要在一段字符的title属性里加入一大段文字。字符串本身用UNIX行尾符LF换行。我直接输出字符串,发现在IE和 Firefox下都可以显示出断行。

<div title="123
456">text</div>

不过,Firefox的Html Validator扩展报了错。在网上搜了一圈,这里 提到:

The (X)HTML DTDs define the contents of the title attribute as CDATA for which the W3C states:
User agents should interpret attribute values as follows:

  • Replace character entities with characters,
  • Ignore line feeds,
  • Replace each carriage return or tab with a single space.

大概的意思是,XHTML DTD定义title属性为一个CDATA,而根据SGML里CDATA的定义,浏览器应该:替换所有html实体;忽略LF字符;替换所有CR字符和 tab字符为一个空格。

按照W3C的说法,执行这3步后,所有的CR和LF字符已经他们的html实体都已消失或变成空格了。看起来在title里换行变成不可能的事了。 不过,Firefox好像并没有转换CR字符为空格,而是把CR给忽略了。而LF字符倒是没有被处理,直接换行了。上面的代码,不用UNIX行尾符LF, 而是用Mac行尾符CR,在IE下还能换行,但是在Firefox下,CR字符直接被忽略了。我还是很想通过W3C的验证,所以做了一下测试,使用LF字 符或者LF的html实体& #10; 都 是可以的。网上流传说可以用CR的html实体& #13;,其实只是IE中可以,Firefox下一样不行。如果不追求符合W3C,那还不如直接把字符串转成UNIX行尾符输出呢。

<div title="123& #10;456">text</div>


还有,title里有小于号和单引号好像并不要紧,但是有双引号就不行了。这么说来,把字符串里的换行和双引号给替换一下输出就行了?唉,复杂复 杂,晕了。这里 有一个介绍这方面问题的页面,不过没太看懂。

发现CR的全称是Carriage Return,Carriage是字车的意思,Carriage Return意思是字车复位。LF的全称是Line Feed,喂进一行,就是新起一行的意思。这起源于打字机时代,每打到一行的末尾,打字员要手工把字车推回第一列,字车复位后,纸会上升一行。所以就有了 ASCII码值为13的CR和ASCII码值为10的LF两个字符。而DOS和Windows下文本文件的新行用CR和LF两个字符表示,UNIX下用 LF,Mac下用CR。呼,这些资料大概在上个世纪我就知道了,不过一直记不住两个字符的ASCII码是多少,现在复习一遍,这下我应该能记住了。[via ]

P.S. 好像C++里"/n"在Windows下输出CRLF,在UNIX下输出LF,而"/r"输出CR。PHP里是"/n"输出的是LF,"/r"输出的是 CR。

分享到:
评论

相关推荐

    HTML实现title 属性换行小技巧

    具体来说,文章提到了使用HTML实体`(这是一个空标签,但此处用法是作为示例而未必正确,具体细节可能因文档内容识别错误或遗漏而不够准确),它似乎被误认作是实现`title`属性换行的关键部分。 实际上,要实现`...

    HTML title 属性换行的办法

    前两天在写程序的时候,想给提示信息(TITLE)换行...将title属性分成几行来写,例如: 印象派&lt;/a&gt; 2.第一行相对来说不够直观,我们还可以在需换行的地方添加 (将&改为半角,下同)或 来实现: 印象派&lt;/a&gt; 印象派&lt;/a&gt;

    html a 链接标签title属性换行鼠标悬停提示内容的换行效果

    html title属性换行 ``` 在浏览器中,当你将鼠标悬停在链接上时,这些换行的内容将会以多行的形式显示出来。 ### 方法二:使用HTML实体进行换行 这种方法涉及到HTML实体的使用。HTML实体是一种特殊的字符编码,...

    Label的ToolTip属性,或是a标签的提示换行问题

    在探讨“Label的ToolTip属性,或是a标签的提示换行问题”这一主题时,我们首先需要理解几个核心概念:ToolTip属性、HTML编码与解码、以及如何在网页中实现文本的换行。以下是对这些概念的详细解析: ### 1. ToolTip...

    HTML5中对title属性的定义与规定

    ### HTML5中对title属性的定义与规定 #### 概述 在HTML5中,`title`属性是一种非常实用的功能,它可以为网页中的各种元素添加额外的信息或描述。需要注意的是,这里的`title`属性并不等同于用于定义文档标题的`...

    表单标签的title属性加样式(如动态生成时加换行、标红等)

    本篇将深入探讨如何利用`title`属性添加样式,特别是在动态生成表单时如何实现换行、标红等效果。 首先,`title`属性是HTML元素的一个标准属性,它用于定义元素的鼠标悬停提示文本。当鼠标悬停在元素上时,这个提示...

    英文自动换行怎样解决

    本文将探讨如何有效地实现英文自动换行,并通过CSS属性如`word-wrap`和`word-break`来解决这一问题。 #### 二、CSS中的换行控制属性 在CSS中,有几种属性可以用来控制文本的换行行为,包括`word-wrap`和`word-...

    html5标签属性及使用方法教程

    接下来,我们将深入探讨HTML5标签及属性的使用方法。 首先,了解&lt;!doctype&gt;元素的重要性。它用于声明文档类型,确保浏览器能够以标准模式渲染页面,而不是兼容模式,这对于新功能的正常工作是必需的。在HTML5中,&lt;!...

    支持IE和FF同时自动换行

    早期的IE版本(如IE6、IE7)对上述CSS属性支持较差,因此在实现跨浏览器兼容的自动换行功能时,需要采用变通的方法。其中,使用`&lt;table&gt;`元素是一种常见且有效的解决方案。 #### 三、示例代码解析 在给定的代码...

    krpano 生成html弹窗,showtextlist文本介绍,combobox下拉框,hotspot热点带标题

    要创建带有标题的hotspot,首先定义一个hotspot层,然后设置其`title`属性为要显示的标题。你还可以通过CSS样式自定义标题的外观,比如颜色、字体大小等。此外,可以利用krpano的`over`和`out`事件来控制鼠标悬停时...

    HTML标签与属性大全

    - `&lt;title&gt;`:设置网页的标题,显示在浏览器的标签页上。 3. **文档属性**: - `bgcolor`:设置网页背景色。 - `text`:设置页面文本颜色。 - `link`:设置未访问链接的颜色。 - `vlink`:设置已访问链接的...

    HTML5 标签属性大全

    + title 属性:指定鼠标悬浮时的文字 + width 属性:指定图片的宽度 + height 属性:指定图片的高度 链接标签 * &lt;a&gt; 链接标签:用于在 HTML 文档中添加链接 + href 属性:指定链接的地址 + target 属性:指定...

    html语法属性 CHM

    HTML标签是元素的标识,通常成对出现,但有些标签是自闭合的,如` `用于换行。标签区分大小写,但大多数现代浏览器对大小写不敏感。常见的标签包括`&lt;p&gt;`(段落)、`&lt;h1&gt;`至`&lt;h6&gt;`(标题)、`&lt;a&gt;`(链接)、`...

    html基础属性代码

    5. **换行与布局**:` `用于插入一个换行,`&lt;p&gt;`标签创建段落,`align`属性可设置段落对齐方式。`&lt;center&gt;`标签使内容居中。 6. **标尺线**:`&lt;hr&gt;`创建水平分隔线,通过`size`, `color`, `width`和`align`属性...

    HTML基础属性解释

    - `title` 属性定义鼠标悬停时显示的提示文本。 11. **CSS基础**: - 计量单位包括 `px`(像素)、`em`(相对单位,基于父元素的字体大小)和 `%`(百分比)。 - `background-color`、`color` 和 `border-color`...

    html标签及属性大全

    ### HTML标签及属性详解 HTML(HyperText Markup Language)是用于创建网页的标准标记语言。它由一系列的元素组成,这些元素通过标签表示。下面将详细解释部分常用的HTML标签及其属性,帮助理解网页结构和功能。 #...

    HTML常用属性

    `&lt;HTML&gt;`标签标志着整个文档的开始,`&lt;HEAD&gt;`包含了文件的元信息,如标题、脚本和样式定义,而`&lt;TITLE&gt;`则定义了浏览器标题栏中显示的网页标题。`&lt;/HEAD&gt;`、`&lt;/BODY&gt;`和`&lt;/HTML&gt;`分别作为它们各自部分的结束标志。 ...

    Bootstrap Tooltip显示换行和左对齐的解决方案

    例如,在Tooltip的title属性中,我们可能需要显示多行文本,但是这些文本却被合并成一行显示出来了。这是因为Tooltip默认情况下不支持换行符号。 解决方案:使用data-html属性 为了解决换行丢失的问题,我们可以...

Global site tag (gtag.js) - Google Analytics