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

其实建议用css控制超出隐藏显示

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

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

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

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

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

赞 (0)

相关推荐

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

    其实建议用css控制超出隐藏显示 也就是标题因为设计的宽度问题所以没有显示全,看样子是使用程序来截字的.我想很多网站都遇到这样的情况.为了视觉效果不得不进行截字显示以满足网站的整体视觉效果.通常我们采用截字的方法是两种,一种是通过后台输出时来事先设定一定的字符数量.另一种是通过CSS或是JS来对已经输出的完整的内容进行视觉剪截. 在网页标准没有兴起的时候基本上是采用第一种方式来解决这个问题,直到现在这种方式依然被广泛地使用着.这种方式的好处就是可以准确的剪截字数,而不足可能就是因为剪截的工作在后

  • python画图中文不显示问题的解决方法

    python画图中文不显示问题的解决方法

    目录 前言 一.plt.title中文显示的解决: 二.plt.plot中文显示的解决: 三.供参考代码 总结 前言 python画图,如果用英文显示基本没有问题,但是中文可能会有乱码或者不显示的情况. 经过个人的测试,下图中“横轴”,“纵轴”字样的中文显示没有什么大问题,主要是plt.title部分和plt.plot部分的显示 一.plt.title中文显示的解决: from matplotlib.font_manager import FontProperties font_set = Fo

  • BootStrap 标题设置跨行无效的解决方法

    BootStrap 标题设置跨行无效的解决方法

    最近在使用BootStrap的表格做一个报表界面(不需要报表的功能,只需要预览并且行列定好无需根据数据量变化,如有更好的框架欢迎推荐.),发现标题设置跨行属性rowspan无效.html如下: <table class="table table-bordered"> <thead> <th colspan="2" rowspan="2">功能分类</th> <th>第二列</th&

  • fckeditor部署到weblogic出现xml无法读取及样式不能显示问题的解决方法

    本文实例讲述了fckeditor部署到weblogic出现xml无法读取及样式不能显示问题的解决方法.分享给大家供大家参考,具体如下: 当部署含有Fckeditor编辑器的应用程序时,在tomcat下什么问题都没有,但当部署到weblogic下的时候就会碰到样式下拉菜单显示不出来和模板也提示没有模板,有的还会碰见 Error loading "/fckeditor/fckstyles.xml" Do you want to see more info? 这样的提示, 出现这个问题的原因

  • ThinkPHP打开验证码页面显示乱码的解决方法

    本文实例讲述了ThinkPHP打开验证码页面显示乱码的解决方法.分享给大家供大家参考.具体分析如下: 在用thinkphp开发的时候,有时会出现验证码乱码的问题,解决方法是把如下这个文件放在根目录,访问后就可以解决了,具体的PHP代码如下: 复制代码 代码如下: <?php if (isset($_GET['dir'])){ //设置文件目录   $basedir=$_GET['dir'];   }else{   $basedir = '.';   }   $auto = 1;   checkd

  • PHP CURL采集百度搜寻结果图片不显示问题的解决方法

    PHP CURL采集百度搜寻结果图片不显示问题的解决方法

    1.根据关键字采集百度搜寻结果 根据关键字采集百度搜寻结果,可以使用curl实现,代码如下: <?php function doCurl($url, $data=array(), $header=array(), $timeout=30){ $ch = curl_init(); curl_setopt($ch, CURLOPT_URL, $url); curl_setopt($ch, CURLOPT_HTTPHEADER, $header); curl_setopt($ch, CURLOPT_R

  • 基于Linux系统中python matplotlib画图的中文显示问题的解决方法

    最近想学习一些python数据分析的内容,就弄了个爬虫爬取了一些数据,并打算用Anaconda一套的工具(pandas, numpy, scipy, matplotlib, jupyter)等进行一些初步的数据挖掘和分析. 在使用matplotlib画图时,横坐标为中文,但是画出的条形图横坐标总是显示"框框",就去查资料解决.感觉这应该是个比较常见的问题,网上的中文资料也确实很多,但是没有任何一个彻底解决了我遇到的问题.零零碎碎用了快3个小时的时间,才终于搞定.特此分享,希望能帮到有同

  • javascript入门·动态的时钟,显示完整的一些方法,新年倒计时

    时间对象作为非常重要的一个对象,对我们学.net的人来说,并不是很重要,但这并不意味着我们可以忽略,事实上,用得着的时候还是很多的,如果完全依赖JS处理时间,那是会出问题的,因为JS总是假设本地机器上的时间是正确的.还有个原因,他总按照GTM市区来计量.我们只是返回当前date对象的副本,我们即便是修改,那也不会对对象本身有任何影响. 演示一:动态的时钟(来个复杂的) 11:55:13 演示二:显示完整的一些方法(事实上我很讨厌有些格式了) Mon Oct 1 22:35:25 UTC+0800

  • JS实现网页标题随机显示名人名言的方法

    JS实现网页标题随机显示名人名言的方法

    本文实例讲述了JS实现网页标题随机显示名人名言的方法.分享给大家供大家参考,具体如下: 这段代码实现每次刷新过后,网页的标题都会随机显示名人名言,一次一条,把这些名言定义在Javascript的数组内,每次调用随机调用一条,随机产生的随机数正好是数组的标号,这样就实现了随机,不错的效果吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-title-show-tips-style-codes/ 具体代码如下: <!DOCTYPE html

  • Android Service中使用Toast无法正常显示问题的解决方法

    Android Service中使用Toast无法正常显示问题的解决方法

    本文实例讲述了Android Service中使用Toast无法正常显示问题的解决方法.分享给大家供大家参考,具体如下: 在做Service简单练习时,在Service中的OnCreate.OnStart.OnDestroy三个方法中都像在Activity中同样的方法调用了Toast.makeText,并在Acitivy中通过两个按钮来调用该服务的onStart和onDestroy方法: DemoService代码如下: @Override public void onCreate() { su

随机推荐