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)。只有这样才能实现溢出文本显示省略号的效果。
- 浏览: 52723 次
- 性别:
- 来自: 南京
最新评论
-
kenche1:
峰哥,翻了几篇文章,终于确定你是BigHan出来的了,方便交流 ...
webservice客户端调用复杂对象报错,求帮助啊!!! -
yaoyun229:
写的很好,看你的文章之前,我也一直以为 mvc == 三层架构 ...
三层架构,MVC浅谈【一】 -
dicmo:
解决了吗??是不是JDK版本问题
webservice客户端调用复杂对象报错,求帮助啊!!! -
cd1989929:
请问这个问题解决了吗?我也遇到了
webservice客户端调用复杂对象报错,求帮助啊!!! -
高成锋:
我发布这个问题的时候是希望能人帮我解决,哎,等到最后还是 ...
tomcat服务启动中但是不能访问服务下的项目,怎么办?
相关推荐
`text-overflow`属性是CSS中用于处理文本溢出的一种解决方案,它允许我们控制超出元素边界时的文本显示方式。本文将详细介绍在Firefox下如何完美解决文本溢出的问题,并提供相关的解决方案。 首先,我们需要理解`...
在CSS中,`text-overflow`属性用于处理文本溢出的情况,它允许你定义当文本在有限的容器内无法完全显示时如何展示超出部分。在标题和描述中提到的,`text-overflow`通常需要与`overflow`和`white-space`属性结合使用...
`text-overflow: ellipsis;` 是 CSS3 提供的一个样式属性,用于处理溢出的文本,但在 Firefox 浏览器中,无 JavaScript 的情况下,直接使用该属性可能存在兼容性问题。本知识点将详细介绍如何在 Firefox 中无 JS ...
基本语法 text-overflow的使用需配合hight,over-flow:hidden;white-space:nowrap;三个属性共同使用 text-overflow: clip;ellipsis;string clip: 直接隐藏不显示 ...style type=text/css> .tf{ width:
在CSS中,`text-overflow`属性是用来处理文本溢出情况的一个重要工具,尤其是当文本在有限的容器内无法完全显示时。这个属性通常与`overflow`和`white-space`属性一起使用,来实现文本的截断和省略。本文将深入探讨`...
CSS中text-overflow属性用于处理文本溢出元素框边界时的显示情况。当文本长度超过了元素所能容纳的范围,我们可以决定如何显示溢出的部分。一般情况下,浏览器默认的处理方式是将文本截断,也就是直接切断超出部分,...
实现这一需求的CSS属性是 `text-overflow: ellipsis`。 `text-overflow: ellipsis` 是一个CSS样式属性,用于指定期望如何渲染溢出的内容。当文本溢出其包含元素的边界时,`text-overflow` 属性定义了应如何显示省略...
听说用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:
要实现这个效果,我们需要结合使用`text-overflow`, `white-space`和`overflow`这三个CSS属性。以下是具体的实现步骤: 1. **`text-overflow: ellipsis;`**:这是核心属性,告诉浏览器当文本溢出元素边界时,应该...
text-overflow属性就是用来解决这个问题的CSS属性。它有两个属性值:clip和ellipsis。 首先,我们来详细了解一下这两个属性值的含义和区别: 1. clip:这个值表示“裁剪”。当文本溢出时,超出部分将被简单地裁剪...
标题和描述中提到的“CSS省略号text-overflow超出溢出显示省略号”是指在CSS样式中利用`text-overflow: ellipsis;`来实现当文本内容超出指定容器的宽度时,用省略号表示被截断的文本。 `text-overflow`属性有以下几...
详情请查看地址:https://blog.csdn.net/Li_dengke/article/details/113061498
标题中的"无hack无js全兼容text-overflow-ellipsis效果"指的是在网页设计中实现文本溢出时显示省略号的效果,而且这个方法无需使用JavaScript(js)或任何黑客(hack)技巧,并且能够兼容各种浏览器。`text-overflow: ...
在CSS中,`text-overflow`属性用于处理文本溢出的情况。当文本内容超过其容器的边界时,`text-overflow`提供了两种主要的行为:`ellipsis`和`clip`。`ellipsis`会在文本末尾添加省略号,表示还有未显示的文本;而`...