`

CSS3 text-overflow 文本溢出

    博客分类:
  • CSS3
 
阅读更多
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:

    大家经常用的css3属性text-overflow是针对单行文本溢出的操作,那块级元素的文本溢出要怎样处理呢? 需要用到-webkit-line-clamp:

    CSS属性text-overflow的使用问题

    我内容文本溢出全部不显示才能裁剪。不然裁剪之后还是显示溢出就想日狗了  试了下visible. 那text-overflow就不管用了。该溢出还是溢出。管你用没用text-overflow。 2,white-space:nowrap; 这个属性是空白符的...

    使用text-overflow:ellipsis实现溢出文本省略号显示无需js

    听说用css的 text-overflow: ellipsis 也可以实现,于是尝试了下。 发现除了设置 text-overflow 属性为 ellipsis 外 还需要设置 white-space 属性为 nowrap (限制不换行) 和 overflow 属性为 hidden (隐藏溢出...

    CSS省略号text-overflow超出溢出显示省略号

    DIV CSS text-overflow文本有溢出时显示css省略号clip ellipsis样式基础知识与用法实例经验教程

    CSS控制html文本溢出

    &lt;title&gt;CSS控制文本溢出_网页特效_javascript特效_css特效-ViewCss网页特效网 &lt;meta name="Keywords" content="CSS控制文本溢出_网页特效,javascript特效,css特效,网页特效代码,网站制作" /&gt; &lt;meta http-equiv=...

    移动端的text-overflow多行文本溢出显示省略号(…)

    但是这个属性并不支持多行文本溢出显示省略号,这里根据应用场景介绍几个方法来实现这样的效果。 WebKit浏览器或移动端的页面 在WebKit浏览器或移动端(绝大部分是WebKit内核的浏览器)的页面实现比较简单,可以直接...

    表格里使用text-overflow后不能隐藏超出的文本的解决方法

    在w3cschool中css3中有个文本相关的属性text-overflow,当把它设为ellipsis时文本溢出内容就能显示为省略标记,而设为clip时就能把文本溢出的部分裁切掉,当然,前提是设置好两个属性,那就是white-space:nowrap...

    CSS控制文本的长度 超过一行显示省略号的实现方法

    text-overflow属性仅是注解,当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。我们想要实现溢出时产生省略号的效果。还必须定义:强制文本在一行内显示(white-space:nowrap)及溢出内容为隐藏

    HTML超出文本显示省略号…通过text-overflow实现

    需要对div或者span同时应用Css: 复制代码代码如下: text-overflow:ellipsis; white-space:nowrap;...即可实现所想要得到的溢出文本显示省略号效果。 当然了你的页面元素要设置固定的宽度,超出了宽度才会显示。

    CSS文本超出2行就隐藏并且显示省略号

    text-overflow:ellipsis; //溢出用省略号显示 white-space:nowrap; //溢出不换行 但是第三条属性,只能显示一行,不能用在这里,那么如果显示多行呢? 超出两行隐藏: css3解决了这个问题,解决方法如下: display:-...

    css实现文本溢出显示省略号

    复制代码代码如下:&lt;!...&lt;head&gt;&lt;meta charset=”UTF-8″&gt;...当文本对象溢出是显示…,当然也可是设置属性为clip不显示点点点;-o-text-overflow:为了兼容opera浏览器;*/width:200px;overflow:hidd

    CSS实现单行、多行文本溢出显示省略号的实现方法

    如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览

    jquery-text-tailor:这是用于处理文本溢出的jQuery插件

    这是用于处理文本溢出的jQuery插件。 您要做的就是导入文件,并将名为“ data-text-tailor”的属性添加到每个html元素,然后执行javascript函数。 像下面 (function initPage($) { textTailor.init({ transform: ...

    纯CSS实现多行文字截断的示例代码

    做响应式系统设计的时候遇到需要对标题进行多行文字截取的效果,如下图: 看似十分简单的标题截断效果,但是竟然没有一个统一 CSS 属性实现标准,需要用到一些奇淫妙计来...文本溢出我们经常用到的应该就是 text-ov

    CSS小结:一行内文本超出指定宽度溢出的处理

    看到标题你一定很容易就会想到截断文字加“…”的做法。哈哈,就是这样。其实写这篇日志也只是把这样方法做个记录,因为好像还有很多人不记得遇到这样的情况该如何处理。.../* 当对象内文本溢出时显示省略标记(…) ;

    CSS中一些常用的文本属性整理

    概要:其作用是解决文本溢出时,其展现的形式 该属性有两个参数,分别如下: CSS Code复制内容到剪贴板 text-overflow : clip | ellipsis  clip:不显示省略标记(….),溢出的文本会被的裁减掉。ellipsis:文本...

    css-common:常用的css总结

    CSS整块文本溢出省略方案 &lt; style &gt; .wrap { width : 200 px ; white - space : normal ; overflow : hidden ; text - overflow : ellipsis ; display : - webkit - box ; - webkit - line - clamp : 1...

    css控制文本实现越界省略号以及自动换行

    越界省略号 复制代码代码如下: .text-overflow { .../* 当对象内文本溢出时显示省略标记(…) ;需与overflow:hidden;一起使用。*/ } 自动换行: 复制代码代码如下: word-break:break-all;/* 不换行 */ white-sp

    微信小程序灵动电商:使用css控制文本只显示2行防止溢出

    text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;   同理,3行4行都是不在话下   对于平时只显示一行的,代码要更加简单一些   overflow: hidden;...

    纯 CSS 实现多行文字截断功能

    原文地址 前言 最近在做响应式系统设计的时候遇到需要对标题进行多行文字截取的效果,如下图: 看似十分简单的标题截断效果,但是竟然没有一个统一 CSS 属性实现标准,需要用到一些奇淫妙计来...文本溢出我们经常

Global site tag (gtag.js) - Google Analytics