text-overflow是一个比较非凡的属性,在CSS手册中,这个属性是这样定义的:
语法:
text-overflow : clip | ellipsis
参数:
clip : 不显示省略标记(...),而是简单的裁切
(clip这个参数是不常用的!)
ellipsis : 当对象内文本溢出时显示省略标记(...)
说明:
设置或检索是否使用一个省略标记(...)标示对象内文本的溢出。
请您注重,text-overflow:ellipsis属性在FF中是没有效果的。
示例:
div { text-overflow : clip; }
text-overflow是一个比较非凡的样式,我们可以用它代替我们通常所用的标题截取函数,而且这样做对搜索引擎更加友好,如:标题文件有50个汉字,而我们的列表可能只有300px的宽度。假如用标题截取函数,则标题不是完整的,假如我们用CSS样式text-overflow:ellipsis,输出的标题是完整的,只是受容器大小的局限不显示出来罢了。
关于text-overflow属性如何应用,我们作如下的说明讲解:
text-overflow属性仅是注解,当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。我们想要实现溢出时产生省略号的效果。还必须定义:强制文本在一行内显示(white-space:nowrap)及溢出内容为隐藏(overflow:hidden)。只有这样才能实现溢出文本显示省略号的效果。
- 浏览: 51269 次
- 性别:
- 来自: 南京
最新评论
-
kenche1:
峰哥,翻了几篇文章,终于确定你是BigHan出来的了,方便交流 ...
webservice客户端调用复杂对象报错,求帮助啊!!! -
yaoyun229:
写的很好,看你的文章之前,我也一直以为 mvc == 三层架构 ...
三层架构,MVC浅谈【一】 -
dicmo:
解决了吗??是不是JDK版本问题
webservice客户端调用复杂对象报错,求帮助啊!!! -
cd1989929:
请问这个问题解决了吗?我也遇到了
webservice客户端调用复杂对象报错,求帮助啊!!! -
高成锋:
我发布这个问题的时候是希望能人帮我解决,哎,等到最后还是 ...
tomcat服务启动中但是不能访问服务下的项目,怎么办?
CSS text-overflow
- 博客分类:
- web
相关推荐
text-overflow:clip | ellipsis 这个属性使用必须通过几个属性一块才能使用 1,overflow:hidden; 这个属性是内容区装不下内容应该怎么办。这里让溢出内容直接不显示。这个感觉就是必备的属性。我内容文本溢出全部...
基本语法 text-overflow的使用需配合hight,over-flow:hidden;white-space:nowrap;三个属性共同使用 text-overflow: clip;ellipsis;string clip: 直接隐藏不显示 ...style type=text/css> .tf{ width:
内容超出后自动隐藏并加省略标记(...)引号的Css text-overflow:ellipsis; o...
听说用css的 text-overflow: ellipsis 也可以实现,于是尝试了下。 发现除了设置 text-overflow 属性为 ellipsis 外 还需要设置 white-space 属性为 nowrap (限制不换行) 和 overflow 属性为 hidden (隐藏溢出...
style tyep=”text/css”>.my_css { overflow:hidden; word-break:keep-all; white-space:nowrap; text-overflow:ellipsis; width:120px; height:20px; font-size:12px;}</style></HEAD><B
大家经常用的css3属性text-overflow是针对单行文本溢出的操作,那块级元素的文本溢出要怎样处理呢? 需要用到-webkit-line-clamp:
主要给大家介绍了关于css中text-overflow属性与文本截断的相关资料,文中给出了详细的示例代码供大家参考学习,希望本文的内容对各位前端开发者们能带一定的帮助,需要的朋友们下面跟着小编一起来学习学习吧。
详情请查看地址:https://blog.csdn.net/Li_dengke/article/details/113061498
DIV CSS text-overflow文本有溢出时显示css省略号clip ellipsis样式基础知识与用法实例经验教程
大家应该都知道用text-overflow:ellipsis属性来实现单行文本的溢出显示省略号(…)。当然部分浏览器还需要加宽度width属性。 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; 但是这个属性并不...
在w3cschool中css3中有个文本相关的属性text-overflow,当把它设为ellipsis时文本溢出内容就能显示为省略标记,而设为clip时就能把文本溢出的部分裁切掉,当然,前提是设置好两个属性,那就是white-space:nowrap...
本文是CSS属性探秘系列的第二篇,主要为大家介绍了css的overflow属性以及其相关属性text-overflow,有需要的朋友可以参考下,欢迎大家来进行讨论
首先平时用的时候要配合 复制代码代码如下: overflow: hidden; white-space: nowrap; 这两个属性让起溢出隐藏和不换行,然后IE8用的时候记得不要加 复制代码代码如下: word-berak:break-all;... -o-text-overflow
text-overflow:ellipsis; white-space:nowrap; course:hand; margin:0 auto;} HTML---------------------- <div class="text">非常多的字数你能控制得了不可能的骗你是小狗</div> ----------------------------...
CSS3 Properties ...overflow-x , overflow-y Generated Content content Other modules media queries multi-column layout Web fonts speech Copyright © 2009 Tencent ISD webteam. All Rights Reserved
复制代码代码如下: text-overflow:ellipsis; white-space:nowrap; overflow:hidden; 即可实现所想要得到的溢出文本显示省略号效果。 当然了你的页面元素要设置固定的宽度,超出了宽度才会显示。
text-overflow:ellipsis; white-space:nowrap; overflow:hidden; >a b c d e f g h i j k l , msa sd sd sa w df f text-overflow属性仅是注解,当文本溢出时是否显示省略标记。并不具备...
clear float clip overflow overflow-x overflow-y display visibility 外补丁 Margins margin margin-top margin-right margin-bottom margin-left 轮廓 Outlines outline outline-color outline-style ...