text-overflow
语法:
text-overflow : clip | ellipsis
参数:
clip : 不显示省略标记(...),而是简单的裁切
ellipsis : 当对象内文本溢出时显示省略标记(...)
说明:
设置或检索是否使用一个省略标记(...)标示对象内文本的溢出。
对应的脚本特性为textOverflow。请参阅我编写的其他书目。
示例:
div { text-overflow : clip; }
好多人在使用后看到效果:
text -overflow属性仅是注解,当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。我们想要实现溢出时产生省略号的效果。还必须定义:强制文 本在一行内显示(white-space:nowrap)及溢出内容为隐藏(overflow:hidden)。只有这样才能实现溢出文本显示省略号的效果。
<div style="width:40px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;">${task.comments}</div>
white-space : normal | pre | nowrap
normal : 默认处理方式
pre : 用等宽字体显示预先格式化的文本。不合并字间的空白距离和进行两端对齐。参阅pre对象
nowrap : 强制在同一行内显示所有文本,直到文本结束或者遭遇br对象。参阅td,div等对象的nowrap属性(特性)
overflow : visible | auto | hidden | scroll
visible : 不剪切内容也不添加滚动条。假如显式声明此默认值,对象将被剪切为包含对象的window或frame的大小。并且clip属性设置将失效
auto : 此为body对象和textarea的默认值。在需要时剪切内容并添加滚动条
hidden : 不显示超过对象尺寸的内容
scroll : 总是显示滚动条
分享到:
相关推荐
今天在做jsp页面展示的时候碰到一个实现溢出文本显示省略号的需求 原本使用js截取字符串然后判断字符串长度实现,不过相对比较繁琐,并且字符串长度不能自适应 听说用css的 text-overflow: ellipsis 也可以实现,...
内容超出后自动隐藏并加省略标记(...)引号的Css text-overflow:ellipsis; o...
大家应该都知道用text-overflow:ellipsis属性来实现单行文本的溢出显示省略号(…)。当然部分浏览器还需要加宽度width属性。 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; 但是这个属性并不...
text-overflow属性仅是注解,当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。我们想要实现溢出时产生省略号的效果。还必须定义:强制文本在一行内显示(white-space:nowrap)及溢出内容为隐藏
ellipsis代表当对象内文本溢出时显示省略标记(…) 需要注意的是,要想这两个属性起真正的作用,需要配合overflow:hidden;white-space:nowrap;使用。 overflow:hidden;代表着超出文本的部分不显示 white-space:...
复制代码代码如下: 试试看试试看试试看试试看试试看试试看试试看试试看试试看试试看试试看</div> 效果: 语法: ...ellipsis : 当对象内文本溢出时显示省略标记(…) 说明: 设置或检索是否使用一个
复制代码代码如下:<!...<head><meta charset=”UTF-8″>...当文本对象溢出是显示…,当然也可是设置属性为clip不显示点点点;-o-text-overflow:为了兼容opera浏览器;*/width:200px;overflow:hidd
text-overflow:ellipsis; //溢出用省略号显示 white-space:nowrap; //溢出不换行 但是第三条属性,只能显示一行,不能用在这里,那么如果显示多行呢? 超出两行隐藏: css3解决了这个问题,解决方法如下: display:-...
ellipsis:文本溢出时会显示省略的标记(…),插入的位置是最后一个字符。 要使该属性起作用,还得具备以下几个条件。 width | max-width:明确给需要截取文本的容器设置宽度值。 white-space:nowrap:给文本容器...
在w3cschool中css3中有个文本相关的属性text-overflow,当把它设为ellipsis时文本溢出内容就能显示为省略标记,而设为clip时就能把文本溢出的部分裁切掉,当然,前提是设置好两个属性,那就是white-space:nowrap...
首先平时用的时候要配合 复制代码代码如下: overflow: hidden; white-space: nowrap; 这两个属性让起溢出隐藏和不换行,然后IE8用的时候记得不要加 复制代码代码如下: word-berak:break-all;... -o-text-overflow
如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览
越界省略号 复制代码代码如下: .text-overflow { .../* 当对象内文本溢出时显示省略标记(…) ;需与overflow:hidden;一起使用。*/ } 自动换行: 复制代码代码如下: word-break:break-all;/* 不换行 */ white-sp
text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; 设计是这样的。。 点击展开.png 点击收起.png 接下来我来讲讲我的实现 <div class="rev
DIV CSS text-overflow文本有溢出时显示css省略号clip ellipsis样式基础知识与用法实例经验教程
需要对div或者span同时应用Css: 复制代码代码如下: text-overflow:ellipsis; white-space:nowrap;...即可实现所想要得到的溢出文本显示省略号效果。 当然了你的页面元素要设置固定的宽度,超出了宽度才会显示。
复制代码代码如下:<!...<HEAD><TITLE> New Document </TITLE>...style tyep=”text/css”>... text-overflow:ellipsis; width:120px; height:20px; font-size:12px;}</style></HEAD><B
在我们的日常开发工作中,文本溢出截断省略是很常见的一种需考虑的业务场景细节。看上去 “稀松平常” ,但在实现上却有不同的区分,是单行截断还是多行截断?...单行文本溢出省略 核心 CSS 语句 overflow: h
看到标题你一定很容易就会想到截断文字加“…”的做法。哈哈,就是这样。其实写这篇日志也只是把这样方法做个记录,因为好像还有很多人不记得遇到这样的情况该如何处理。.../* 当对象内文本溢出时显示省略标记(…) ;