Css--让溢出的文字隐藏

让溢出的文字隐藏

text-overflow:ellipaos;/*让最后一个显示部分遮掩部分的字消失,而变成三个点点的省略号*/

overflow:hidden; /*这个参数可以让超出部分隐藏起来,但是这个隐藏是一种按照宽度而来的直接隐藏*/

white-space:nowrap; /* 确保超出文字显示在一行里面*/

总结:对一个元素我们要添加哪些参数才能让一段文字不换行的方法,并防止文字溢出。

具体如下

{

  width:XXpx;

  white-space:nowrap;

  overflow:hidden;

  text-overflow:ellipsis;

}

时间: 2024-10-27 08:13:55

Css--让溢出的文字隐藏的相关文章

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

前不久根据项目需要,需要写个页面,在页面中需要动态的实现一个树形的菜单,经过问度娘,选择使用一个treeTable的js插件.http://zhanchaojiang.com/demo/demo/treeTable.html这是对该插件的介绍地址.在这个插件中有如下几个树形:theme:default或者是vsStyle,默认为default,差别应该在样式上,default是加减号,vsStyle是三角.expandLevel:默认展开的层数,默认值为1.也就是刷新该页面时树状图展开的层次.c

CSS+Js在段落文字最后自动加入隐藏文字

CSS+Js在段落文字最后自动加入隐藏文字 CSS和JavaScript控制段落最后自动添加指定的隐藏文字,不建议这样用,因为对搜索引擎不太友好.不过作为一项技巧来研究,下面帖出具体的代码,以供参考指正: 01 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 0

CSS多余文字隐藏

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

超链接文字隐藏

㈠方法一:利用span元素 举例:在设置网页头部的logo时,点击图片会自动跳转到一个页面,这是利用了超链接加背景图片做到的           但是,仔细观看就会发现没有超链接的文字部分,被隐藏了,这是如何做到的呢? 方法:我们可以采用在超链接中加入一个span元素,设置span的样式,display:none:进行隐藏. 代码如下: <!--html代码部分--> <header class="header"> <div class="log

【CSS笔记】使文字在一行显示,超出部分用省略号显示

CSS代码: text-overflow:ellipsis; overflow:hidden; white-space:nowrap; 说明: text-overflow:用来设置是否使用一个省略标记(···)标示对象内文本的溢出. white-space:nowrap;强制文本在一行内显示. overflow:hidden;溢出内容为隐藏. 必须三者同时用的时候才会实现溢出文本显示省略号 附:多行显示的方法: overflow: hidden; text-overflow: ellipsis;

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

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

新公司入职第一天遇到的 关于 CSS 单行溢出文本显示省略号...的问题

上班第一天 前端岗位,因为公司这个项目是标准开发 所以没法用框架在打架页面,好吧 我手写 各种div 各种css样式 好不忧伤,好吧 不废话了 进入正题. 想在导航栏中的 客户信息 功能点 实现溢出用‘...’来代替, 我一想 这简单啊 只要给div加上text-overflow:ellipsis;属性就好了呗, 结果 怎么调也不行,你说把我压抑的啊 经过一阵查终于找到原因出在哪里里 原来text-overflow:ellipsis;的属性 得需要另外两个属性的配合才能实现 这俩分别是 over

letter-spacing+first-letter实现按钮文字隐藏

本文地址:http://www.zhangxinxu.com/wordpress/?p=3557 一.文不在长,有货则灵 图片式按钮的文字隐藏看来是大家都比较关注的一个问题(分享讨论.微博转发等可见一斑),text-indent负值为最常用方法,然问题有三: 较大的负值有性能问题,例如新浪/腾讯微博提交按钮的-9999em,大概12~16万像素的宽度,相对于100个显示器宽度,在低配Android pad上,尤其含动画效果的时候,会直接卡爆: FireFox浏览器下虚框.其实问题不大,overf

position:absolute相对于谁定位以及当溢出时怎么隐藏

1.绝对定位元素溢出父元素,怎么隐藏问题? 通常,为了让DIV子元素超出部分隐藏,都是在父元素设置overflow:hidden,这样即可防止子元素撑开父元素,使子元素能够溢出隐藏! 但是,对于position:absolute定位的子元素,仅仅使用overflow:hidden没办法将其溢出部分隐藏,需要在父元素上也加上一个定位position:relative;才能将含有position:absolute属性的子元素进行溢出隐藏! 绝对定位元素相对的元素是它最近的一个祖先,该祖先满足:pos