text-overflow 属性规定当文本溢出包含元素时发生的事情。
语法:text-overflow: clip|ellipsis|string;
clip 修剪文本。
ellipsis 显示省略符号来代表被修剪的文本。
注意:text-overflow:ellipsis;要与white-space:nowrap; 和overflow:hidden; 一起使用才有效果。因为text-overflow只是用来说明
文字溢出时用什么方式显示,要实现溢出时产生省略号的效果,还须定义
强制文本在一行内显示(white-space:nowrap)及
溢出内容为隐藏(overflow:hidden),只有这样才能实现溢出文本显示省略号的效果
<div class="test" >This is some long text that will not fit in the box</div>
div.test{
white-space:nowrap;
overflow:hidden;
text-overflow:clip;
width:12em;
border:1px solid #000000;
}
效果:
div.test{
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
width:12em;
border:1px solid #000000;
}
效果:
- 大小: 636 Bytes
- 大小: 594 Bytes
分享到:
相关推荐
大家经常用的css3属性text-overflow是针对单行文本溢出的操作,那块级元素的文本溢出要怎样处理呢? 需要用到-webkit-line-clamp:
我内容文本溢出全部不显示才能裁剪。不然裁剪之后还是显示溢出就想日狗了 试了下visible. 那text-overflow就不管用了。该溢出还是溢出。管你用没用text-overflow。 2,white-space:nowrap; 这个属性是空白符的...
听说用css的 text-overflow: ellipsis 也可以实现,于是尝试了下。 发现除了设置 text-overflow 属性为 ellipsis 外 还需要设置 white-space 属性为 nowrap (限制不换行) 和 overflow 属性为 hidden (隐藏溢出...
DIV CSS text-overflow文本有溢出时显示css省略号clip ellipsis样式基础知识与用法实例经验教程
<title>CSS控制文本溢出_网页特效_javascript特效_css特效-ViewCss网页特效网 <meta name="Keywords" content="CSS控制文本溢出_网页特效,javascript特效,css特效,网页特效代码,网站制作" /> <meta http-equiv=...
但是这个属性并不支持多行文本溢出显示省略号,这里根据应用场景介绍几个方法来实现这样的效果。 WebKit浏览器或移动端的页面 在WebKit浏览器或移动端(绝大部分是WebKit内核的浏览器)的页面实现比较简单,可以直接...
在w3cschool中css3中有个文本相关的属性text-overflow,当把它设为ellipsis时文本溢出内容就能显示为省略标记,而设为clip时就能把文本溢出的部分裁切掉,当然,前提是设置好两个属性,那就是white-space:nowrap...
text-overflow属性仅是注解,当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。我们想要实现溢出时产生省略号的效果。还必须定义:强制文本在一行内显示(white-space:nowrap)及溢出内容为隐藏
需要对div或者span同时应用Css: 复制代码代码如下: text-overflow:ellipsis; white-space:nowrap;...即可实现所想要得到的溢出文本显示省略号效果。 当然了你的页面元素要设置固定的宽度,超出了宽度才会显示。
text-overflow:ellipsis; //溢出用省略号显示 white-space:nowrap; //溢出不换行 但是第三条属性,只能显示一行,不能用在这里,那么如果显示多行呢? 超出两行隐藏: css3解决了这个问题,解决方法如下: display:-...
复制代码代码如下:<!...<head><meta charset=”UTF-8″>...当文本对象溢出是显示…,当然也可是设置属性为clip不显示点点点;-o-text-overflow:为了兼容opera浏览器;*/width:200px;overflow:hidd
如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览
这是用于处理文本溢出的jQuery插件。 您要做的就是导入文件,并将名为“ data-text-tailor”的属性添加到每个html元素,然后执行javascript函数。 像下面 (function initPage($) { textTailor.init({ transform: ...
做响应式系统设计的时候遇到需要对标题进行多行文字截取的效果,如下图: 看似十分简单的标题截断效果,但是竟然没有一个统一 CSS 属性实现标准,需要用到一些奇淫妙计来...文本溢出我们经常用到的应该就是 text-ov
看到标题你一定很容易就会想到截断文字加“…”的做法。哈哈,就是这样。其实写这篇日志也只是把这样方法做个记录,因为好像还有很多人不记得遇到这样的情况该如何处理。.../* 当对象内文本溢出时显示省略标记(…) ;
概要:其作用是解决文本溢出时,其展现的形式 该属性有两个参数,分别如下: CSS Code复制内容到剪贴板 text-overflow : clip | ellipsis clip:不显示省略标记(….),溢出的文本会被的裁减掉。ellipsis:文本...
CSS整块文本溢出省略方案 < style > .wrap { width : 200 px ; white - space : normal ; overflow : hidden ; text - overflow : ellipsis ; display : - webkit - box ; - webkit - line - clamp : 1...
越界省略号 复制代码代码如下: .text-overflow { .../* 当对象内文本溢出时显示省略标记(…) ;需与overflow:hidden;一起使用。*/ } 自动换行: 复制代码代码如下: word-break:break-all;/* 不换行 */ white-sp
text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; 同理,3行4行都是不在话下 对于平时只显示一行的,代码要更加简单一些 overflow: hidden;...
原文地址 前言 最近在做响应式系统设计的时候遇到需要对标题进行多行文字截取的效果,如下图: 看似十分简单的标题截断效果,但是竟然没有一个统一 CSS 属性实现标准,需要用到一些奇淫妙计来...文本溢出我们经常