让Web页面中,不能折行或不希望被折行的文字始终显示在一行,是一种严格的UI风格,毕竟自由的折行会使得表格和整体界面变得很难把握。当然在一行显示不完全时配以省略号在结尾,能很好的提示用户表示语句未结束,不过这时为了让用户能看到所有文字,Tooltip就是必不可少的了。

    显示Tooltip在Web上还不是轻而易举的事情,只要把html元素的title属性设上非空字符串,就自然是Tooltip了。不过这样其实还是挺麻烦的,由于预先写入title,会带来几个副作用:1、带来不必要的内容开销,因为预置title属性,会带来文档的增大;2、总是会显示Tooltip,即使在一行能显示完全的情况下,也显示Tooltip,这样就会让用户迷惑了,还以为再补充说明什么东西呢;3、遇到Tooltip需要显示的文字里有特殊字符,比如:单引号'双引号"时,还需要在服务器端对Tooltip内容编码。

    使用客服端脚本来处理Tooltip,就可以避免上面提到的所有不足和问题。示例如下:
this is a long long long long long long long long long string. this is a long long long long long long long long long string.
this is a long long long long long long long long long string. this is a long long long long long long long long long string. this is a long long long long long long long long long string.
this is a long long long long long long long long long string. this is a long long long long long long long long long string. this is a long long long long long long long long long string.
this is a long long long long long long long long long string. this is a long long long long long long long long long string. this is a long long long long long long long long long string. this is a long long long long long long long long long string.

    // 蓝色的文字是自己本身就带有Tooltip的,你可以调整页面的大小看看Tooltip的适应性。

    原理是在body元素上统一控制,把下面的代码手工加入页面底部,或者在ASP.NET中使用Page.RegisterStartupScript方法注册到页面上。
>

    参数format用来控制当Tooltip重合的时候怎么显示,因为有的文字本身就有Tooltip,当它出现省略号的时候,就需要设计它怎么和自动的Tooltip一起显示。这样一来页面上只要使用css限制了单行的现实的文字,在出现省略号时就都自动的拥有了Tooltip,并且最重要的是,这时的Tooltip不会受任何特殊字符的影响哦从此不再为Web页面中的Tooltip烦恼

    // StringHelper.Format 方法参看这里

相关文章: