<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>
<div class="my_css"><a title="内容超出后自动隐藏并加省略标记(...)引号的Css" href="#">内容超出后自动隐藏并加引号的Css</a></div>
引用
语法:
text-overflow : clip | ellipsis
取值:
clip : 默认值。不显示省略标记(...),而是简单的裁切
ellipsis : 当对象内文本溢出时显示省略标记(...)
说明:
设置或检索是否使用一个省略标记(...)标示对象内文本的溢出。
这个属性仅仅作用于水平内联方向的,普通的西方文本的溢出。内联溢出发生在行内的文本超出可用宽度却没有换行机会的时候。
要强制溢出发生并且应用 ellipsis 值,作者必须设置对象的 white-space 属性值为 nowrap 。
假如没有换行机会(例如,对象容器的宽度是狭窄的,而内有很长的没有合理断行的文本),没有应用 nowrap 也有可能溢出。
为了使 ellipsis 值被应用,此属性必须被设置到具有不可视区域的对象。最好的选择是设置 overflow 属性为 hidden 。设置 overflow 属性为 scroll 或者 auto 时,此属性也会应用。但是会有滚动条出现。
通过选择省略标记,隐藏的文本可以被选择。当选择发生时,省略标记会隐藏而被文本替换。
此属性为在DHTML中制作省略标记提供了高效的方法。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 textOverflow 。
分享到:
相关推荐
这里,`display: inline-block`使标题元素作为一个块级元素显示,`overflow: hidden`隐藏超出容器的文字,`animation`属性则指定了动画的名称、速度、步骤和播放方向。 对于翻转效果,CSS3提供了`transform`属性,...
例如,默认情况下,如果文本太长,那么超出单元格的部分会自动隐藏,表现为省略号。 要解决文本超出隐藏的问题,可以对`.layui-table-cell`的样式进行如下调整: 1. `height:auto;` 这条规则将单元格高度设置为...
例如,IE6下会自动增加高度,而其他浏览器则可能显示超出部分。 **解决方案**: 1. **使用 `overflow` 属性**: ```css .content-box { overflow: hidden; } ``` 2. **高度自增**: ```css .content-box { ...
3. 图文滚动特效实现原理:特效实现的原理是,设定div内只显示一定数量的图片(例如4个),超出部分的图片会被自动隐藏。然后给图片添加淡入淡出动画事件,使其能够滚动播放。这里的滚动播放指的是在li标签里面的...
CSS(层叠样式表)提供了一种优雅的方式来实现这一需求,即文字过长自动隐藏的功能。本文将详细讲解如何使用CSS来实现单行和多行文字的隐藏,并给出具体的代码示例。 ### 单行文字过长隐藏 单行文字过长隐藏的实现...
为了实现轮播效果,可能需要设置`position: relative`和`overflow: hidden`属性,隐藏超出容器的部分。 3. **jQuery脚本**:主要负责实现轮播的动态效果。这包括自动切换、手动导航、过渡动画等。在本代码中,将...
在网页设计中,文字内容在容器中完整显示是一种基本需求,但有时我们希望在内容超出容器宽度时自动隐藏多余的文本,仅显示前一部分,并以省略号(…)代替被隐藏的内容,这就是文字自动截断隐藏溢出文本的功能。...
### 让超出DIV宽度范围的文字自动显示省略号 在网页设计中,经常需要处理文本溢出的问题。当一个块级元素(如`<div>`)内的文本长度超过了该元素的宽度时,如果不进行适当的处理,可能会导致文本换行或者溢出到元素...
然而,由于多行隐藏依赖于浏览器的私有属性,因此在实际应用中应考虑到兼容性问题,可能需要结合其他技术或解决方案来实现跨浏览器的支持。 总的来说,理解并掌握这两种方法对于提升网页设计的质量和用户体验至关...
在网页设计中,创建一个li列表并实现文字强制不换行,当文字内容超过li元素的宽度时自动隐藏,并在末尾添加省略号,是一种常见的文本显示方式,尤其在新闻列表、文章摘要等场景下。这种效果可以通过CSS样式来实现,...
3. hidden:此值会隐藏超出元素尺寸的内容,不会显示滚动条,也不会提供内容的滚动视图。如果需要让用户知道有内容被隐藏,通常会与white-space: nowrap;一起使用,并在溢出位置显示省略号(...)。 4. scroll:此...
在使用CSS属性控制内容显示时,应考虑到不同浏览器的兼容性问题,并进行适当的测试以确保最佳效果。 另外,部分示例中的文字可能是通过OCR(光学字符识别)技术扫描得到的,可能出现识别错误。在理解代码示例时,...
在本文中,我们将探讨如何使用JavaScript和CSS技术实现当网页中的文本内容超出设定的长度时,自动用省略号(...)来代替超出部分,并且当用户将鼠标悬停在该文本上时,显示完整的文本信息。这通常是在网页设计中用来...
在网页设计中,控制文字自动换行是一个常见而重要的需求。若不加以控制,较长的文字可能会溢出其容器,导致布局混乱或者用户体验不佳。CSS提供了多种方式来实现文字的自动换行。 首先,块级元素如`<div>`和`<p>`在...
在HTML页面中实现一个新闻列表的自动滚动循环滚动展示,可以通过JavaScript的...在实际应用中,可能还需要考虑更多的用户体验和浏览器兼容性问题,例如在不同分辨率的屏幕上展示效果的适配、触屏设备的手势操作兼容等。
/* 隐藏超出部分 */ white-space: nowrap; /* 文本不换行 */ text-overflow: ellipsis; /* 显示省略号 */ } ``` 在Firefox中,由于其对`text-overflow`的支持略有不同,可能需要额外的技巧来实现预期效果。以下...
4. **CSS样式**:通过CSS设置滚动容器的宽度、高度以及溢出隐藏等属性,使内容超出可视区域的部分不可见。同时,设置子元素的样式,保证内容的清晰可读。 5. **JavaScript动画**:使用JavaScript实现定时滚动的效果...
传统的方法是使用JavaScript来实现文字截断,但这需要编写复杂的代码并且需要考虑浏览器的兼容性问题。幸运的是,使用CSS可以实现文字自动截断,用省略号代替超出对象宽度的内容。 在CSS中,我们可以使用text-...
本文将深入探讨五种不同的自动换行策略,这些策略不仅能够满足基本的自动换行需求,更重要的是它们具有良好的浏览器兼容性,能够在IE、Chrome和Firefox等主流浏览器中稳定运行。 ### 一、使用`white-space`和`word-...