关于采用css样式将多余的文字隐藏,以及实现树形菜单

前不久根据项目需要,需要写个页面,在页面中需要动态的实现一个树形的菜单,经过问度娘,选择使用一个treeTable的js插件。http://zhanchaojiang.com/demo/demo/treeTable.html这是对该插件的介绍地址。在这个插件中有如下几个树形:theme:default或者是vsStyle,默认为default,差别应该在样式上,default是加减号,vsStyle是三角。expandLevel:默认展开的层数,默认值为1.也就是刷新该页面时树状图展开的层次。column:可控制的列的序号,默认是0.beforeExpand:展开子节点触发的事件,这个地方可以使用ajax进行异步请求。onSelect: function {拥有controller自定义属性的元素的点击事件,return false则中止展开.

在使用该插件时需要引入jquery.js和treeTable.js,除此之外还需要引入相应的css样式文件,以及用到的图片。

在使用这个插件的时候还碰到了一个问题,那就是给ajax请求到的数据进行渲染的时候,用jquery的click绑定事件,有“延迟”现象,也就是第一次点击没有触发绑定的事件,第二次点击才触发。解决办法是使用live进行事件的绑定,因为live是为现在和将来的某个元素绑定某个事件。

除此之外还碰到了需要将树形菜单中多余的文字隐藏并用“...”代替的问题。使用css进行解决的办法是:

<style>
table td{white-space:nowrap;overflow:hidden; text-overflow:ellipsis;}
table {table-layout:fixed;}
</style>

之后再对每一个td加上title属性,这样就可以在鼠标移动上去的时候显示出来多余的被隐藏的文字。

这些只是工作中碰到的一点点小问题的解决办法,对于我这样刚入行的菜鸟来说,一点一点学习,才能逐渐变为大神。加油~

时间: 2024-10-25 18:58:44

关于采用css样式将多余的文字隐藏,以及实现树形菜单的相关文章

如何让div中的文字只显示一行,多余的文字隐藏并加上省略号(超链接形式)

写页面的时候遇到了一个小小的问题,如何让div中一行超链接文字只显示一行,多余的文字隐藏并加上省略号,悬浮时隐藏的文字显示出来?解决问题时发现了css3的一个新标签  text-overflow  ,其属性规定当文本溢出包含元素时发生的事情.语法如下: text-overflow: clip|ellipsis|string; 代码如下: <!DOCTYPE html><html><head><meta http-equiv="Content-Type&q

Web前端技术:CSS部分初识--行内样式、内嵌样式、外部样式,CSS的优先级,CSS的选择器,各种CSS样式(文本与文字、颜色的表示、背景的设置、超链接、列表、表格、图片)

一.CSS样式 1.行内样式:直接写在body的内部标签里,如下就是行内样式 2.内嵌样式:写在head的style标签内,如下就是内嵌样式 3.外部样式:css样式单独写在一个.css文件里,使用时,在HTML的head内用link标签引用即可 二.CSS的优先级 三.CSS的选择器 选择器是一种选择方式.选中你想要的元素的方法,称之为“选择器”  1.全局选择器:*  2.标签选择器:p.span.a.h1~h6.ul.ol  3.类选择器:.one  4.id选择器:#left  5.后代

CSS多余文字隐藏

有时候容器的宽度是固定的,但要显示的文字有点多,就需要将多余的文字隐藏,而且为了表示还有字没有显示,用省略号表示. 类似这样: 用下面的css样式就可以实现: .hidden-text { overflow: hidden; text-overflow: ellipsis; } 三个属性一起使用,就可以实现上述的效果. overflow,默认值是visible,如果不设置hidden,就会把内容全部显示,查出容器的范围. text-overflow:有三个值, clip(修剪文本).ellips

反爬虫破解系列-汽车之家利用css样式替换文字破解方法

网站: 汽车之家:http://club.autohome.com.cn/ 以论坛为例 反爬虫措施: 在论坛发布的贴子正文中随机抽取某几个字使用span标签代替,标签内容位空,但css样式显示为所代替的文.这样不会 影响正常用户的阅读,只是在用鼠标选择的时候是选不到被替换的文字的,对爬虫则会造成采集内容不全的影响. 原理分析: 先看一下span标签的样式 截图是火狐浏览器的firebug的html面板.我们可以看到正文中每个span标签的样式都是一个文字,我们只需要找到每个 span标签的cla

实现段落文字两端对齐的css样式

有时候网站中的文字比较多,虽然为父元素设置了宽度,但是总是会出现两端参差不齐的情况,看起来不整齐.其实实现段落的两端对齐,只需要设置两个css 样式即可. .demo{ text-align: justify; text-justify: inter-ideograph;/*IE*/ } text-justify基本语法 语法:text-justify : auto |inter-word | newspaper | distribute | distribute-all-lines | int

修改palceholder内文字的css样式

::-webkit-input-placeholder{ color: red; font-size: 20px; line-height: 50px; } 修改class名为test1的元素palceholder内文字css样式 .test1::-webkit-input-placeholder{ color: red; font-size: 20px; line-height: 50px; }

使文字在div中水平和垂直居中的的css样式为,四个边分别设置阴影样式

text-align:center; /*水平居中*/ line-height: 20px; /*行距设为与div高度一致*/ HTML元素 <div>水平垂直居中</div> css样式 div{ width:200px;height:200px; /*设置div的大小*/ border:1px solid green; /*边框*/ text-align: center; /*文字水平居中对齐*/ line-height: 200px; /*设置文字行距等于div的高度*/ o

css实现隐藏多余溢出文字并显示省略号

<meta charset="utf-8" /> <style> .txt{ width:200px; border:1px solid #ddd; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } </style> <p class="txt">溢出文字隐藏溢出文字隐藏溢出文字隐藏溢出文字隐藏</p>

css样式自动换行/强制换行

写样式时遇到的英文字符超出容器问题,度娘后了解下列知识,与大家分享,同时以便自己日后回顾. 一.自动换行问题 正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大. 下面介绍的是CSS如何实现换行的方法 对于div,p等块级元素 正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的 white-space:normal ,当定义的宽度之后自动换行 html: <div id="wrap">正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space