热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

当标题不能显示完整的解决方法

今天刚看到ChinaUI.com新改版的网站,觉得优艾网是越来越漂亮了,这次的变化的确是挺大的。一早大概的看了一下就关了,后来晚上又打开看时发现个问题。
其实建议用css控制超出隐藏显示

也就是标题因为设计的宽度问题所以没有显示全,看样子是使用程序来截字的。我想很多网站都遇到这样的情况。为了视觉效果不得不进行截字显示以满足网站的整体视觉效果。通常我们采用截字的方法是两种,一种是通过后台输出时来事先设定一定的字符数量。另一种是通过CSS或是JS来对已经输出的完整的内容进行视觉剪截。

在网页标准没有兴起的时候基本上是采用第一种方式来解决这个问题,直到现在这种方式依然被广泛地使用着。这种方式的好处就是可以准确的剪截字数,而不足可能就是因为剪截的工作在后台已经完成,所以输出的内容是残缺的。而第二种是通过CSS或是JS做出的一种障眼法。把一定长度以外的内容隐藏掉。以达到需要的视觉效果,好处就是他可以保留完整的数据内容,不足之处可能是非IE浏览器截的字并不完美。比如Firefox常常会有截半个字的尴尬现象。

我想提出的问题是:"标题的不完整是否会影响用户的点击动机?"我斗胆提出这样的论断:标题的不完整将在很大层度上影响用户是否会点击该条信息的动机。我们这里就用优艾网中的一条新闻标题来作分析。网站中有这样一条新闻标题"美国发明用户界面新技术 对着吹",这是一句被机械性截掉的标题。面对这样的标题我们的好奇心是否被勾引起来,当然有可能。但是我们的理解可能是这样的:"美国发明了用户界面的新技术,对着吹……这是个打假新闻。可能是两家公司在吹牛。"如果是这样那么这种八卦的新闻我就没兴趣了。然而这个完整的标题应该是:"美国发明用户界面新技术 对着吹气就能操作计算机"对于这样的标题我就比较有兴趣,我想知道这个吹气为什么就能操作计算机呢,这是我从来没想到过的事。这样我就会有极大的兴趣去点击查看这条新闻。我们可以比较发现,其实最容易勾起我们好奇心的其实是"吹气操作"。这是新技术的核心。也是这个新闻的核心内容。

当然有时候截字是必需的,否则整个网站就会显得很杂乱。那么现在一般的解决方法就是在链接上加入"title"属性。遇到这种语义不清楚的标题时我通常是鼠标悬停查看提示区中的文字以获得比较完整的标题信息。从而完成我是否点击该新闻的判断。但是可惜的是优艾网标题链接中的title属性与标题内容是一样的,如此一来title属性的意义大减。

我们在设计的时候当然是尽可能的把标题显示完整,如果因为特需原因没办法显示完整的时候要尽可能的使title属性是完整的。还有虽然CSS的截字在Firefox中是有缺陷的,但是我还是觉得截字的事应该由CSS来完成。至少这样我们可以得到一个完整的HTML信息文档。当无CSS的时候至少我们同样可以看得到完整的信息内容。

推荐阅读
  • Voicewo在线语音识别转换jQuery插件的特点和示例
    本文介绍了一款名为Voicewo的在线语音识别转换jQuery插件,该插件具有快速、架构、风格、扩展和兼容等特点,适合在互联网应用中使用。同时还提供了一个快速示例供开发人员参考。 ... [详细]
  • 分享css中提升优先级属性!important的用法总结
    web前端|css教程css!importantweb前端-css教程本文分享css中提升优先级属性!important的用法总结微信门店展示源码,vscode如何管理站点,ubu ... [详细]
  • VScode格式化文档换行或不换行的设置方法
    本文介绍了在VScode中设置格式化文档换行或不换行的方法,包括使用插件和修改settings.json文件的内容。详细步骤为:找到settings.json文件,将其中的代码替换为指定的代码。 ... [详细]
  • 基于layUI的图片上传前预览功能的2种实现方式
    本文介绍了基于layUI的图片上传前预览功能的两种实现方式:一种是使用blob+FileReader,另一种是使用layUI自带的参数。通过选择文件后点击文件名,在页面中间弹窗内预览图片。其中,layUI自带的参数实现了图片预览功能。该功能依赖于layUI的上传模块,并使用了blob和FileReader来读取本地文件并获取图像的base64编码。点击文件名时会执行See()函数。摘要长度为169字。 ... [详细]
  • Java实战之电影在线观看系统的实现
    本文介绍了Java实战之电影在线观看系统的实现过程。首先对项目进行了简述,然后展示了系统的效果图。接着介绍了系统的核心代码,包括后台用户管理控制器、电影管理控制器和前台电影控制器。最后对项目的环境配置和使用的技术进行了说明,包括JSP、Spring、SpringMVC、MyBatis、html、css、JavaScript、JQuery、Ajax、layui和maven等。 ... [详细]
  • 本文介绍了使用Java实现大数乘法的分治算法,包括输入数据的处理、普通大数乘法的结果和Karatsuba大数乘法的结果。通过改变long类型可以适应不同范围的大数乘法计算。 ... [详细]
  • Webpack5内置处理图片资源的配置方法
    本文介绍了在Webpack5中处理图片资源的配置方法。在Webpack4中,我们需要使用file-loader和url-loader来处理图片资源,但是在Webpack5中,这两个Loader的功能已经被内置到Webpack中,我们只需要简单配置即可实现图片资源的处理。本文还介绍了一些常用的配置方法,如匹配不同类型的图片文件、设置输出路径等。通过本文的学习,读者可以快速掌握Webpack5处理图片资源的方法。 ... [详细]
  • 本文讨论了如何优化解决hdu 1003 java题目的动态规划方法,通过分析加法规则和最大和的性质,提出了一种优化的思路。具体方法是,当从1加到n为负时,即sum(1,n)sum(n,s),可以继续加法计算。同时,还考虑了两种特殊情况:都是负数的情况和有0的情况。最后,通过使用Scanner类来获取输入数据。 ... [详细]
  • Firefox火狐浏览器关闭到http://detectportal.firefox.com的流量问题解决办法
    本文介绍了使用Firefox火狐浏览器时出现关闭到http://detectportal.firefox.com的流量问题,并提供了解决办法。问题的本质是因为火狐默认开启了Captive portal技术,当连接需要认证的WiFi时,火狐会跳出认证界面。通过修改about:config中的network.captive-portal-service.en的值为false,可以解决该问题。 ... [详细]
  • ASP.NET2.0数据教程之十四:使用FormView的模板
    本文介绍了在ASP.NET 2.0中使用FormView控件来实现自定义的显示外观,与GridView和DetailsView不同,FormView使用模板来呈现,可以实现不规则的外观呈现。同时还介绍了TemplateField的用法和FormView与DetailsView的区别。 ... [详细]
  • CentOS 7部署KVM虚拟化环境之一架构介绍
    本文介绍了CentOS 7部署KVM虚拟化环境的架构,详细解释了虚拟化技术的概念和原理,包括全虚拟化和半虚拟化。同时介绍了虚拟机的概念和虚拟化软件的作用。 ... [详细]
  • 本文介绍了一种解析GRE报文长度的方法,通过分析GRE报文头中的标志位来计算报文长度。具体实现步骤包括获取GRE报文头指针、提取标志位、计算报文长度等。该方法可以帮助用户准确地获取GRE报文的长度信息。 ... [详细]
  • 本文介绍了网页播放视频的三种实现方式,分别是使用html5的video标签、使用flash来播放以及使用object标签。其中,推荐使用html5的video标签来简单播放视频,但有些老的浏览器不支持html5。另外,还可以使用flash来播放视频,需要使用object标签。 ... [详细]
  • Apache Shiro 身份验证绕过漏洞 (CVE202011989) 详细解析及防范措施
    本文详细解析了Apache Shiro 身份验证绕过漏洞 (CVE202011989) 的原理和影响,并提供了相应的防范措施。Apache Shiro 是一个强大且易用的Java安全框架,常用于执行身份验证、授权、密码和会话管理。在Apache Shiro 1.5.3之前的版本中,与Spring控制器一起使用时,存在特制请求可能导致身份验证绕过的漏洞。本文还介绍了该漏洞的具体细节,并给出了防范该漏洞的建议措施。 ... [详细]
  • 本文整理了常用的CSS属性及用法,包括背景属性、边框属性、尺寸属性、可伸缩框属性、字体属性和文本属性等,方便开发者查阅和使用。 ... [详细]
author-avatar
肖顾问
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有