css3的文本效果text-overflow

原创 2013年12月03日 11:03:55
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style> 
div
{
white-space:nowrap; 
width:15em; 
overflow:hidden; 
border:1px solid #000000;
}
div:hover
{
width:20em;
text-overflow:inherit;
overflow:visible;
}
.clip{ text-overflow:clip;}
.ellipsis{ text-overflow:ellipsis}
</style>
<title>无标题文档</title>
</head>

<body>
<div class="clip">
    这个是text-overflow:clip;的效果。
</div>
<br />
<DIV class="ellipsis">
这个是text-overflow:ellipsis;的效果。
</DIV>
</body>
</html>


clip 修剪文本
ellipsis 显示省略符号来代表被修剪的文本。
string 使用给定的字符串来代表被修剪的文本。


效果图:


带hover的效果(鼠标经过)


版权声明:原创文章,请标明出处~~~

css3溢出文本属性------text-overflow

css3溢出文本属性 text-overflow 在网页制作中,经常遇到内容溢出的问题,如文章列表标题过长,而其宽度又受到限制,此时超出宽度的内容就会以省略标记(...)显示。 以前实现这种效果是...
  • xiaobing_hope
  • xiaobing_hope
  • 2016年01月13日 18:09
  • 1264

table表格中文本溢出text-overflow:ellipsis使用中td表格宽度失效问题

1、一般文本超出宽度可进行如下设置: width:300px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; ...
  • I_am_listen
  • I_am_listen
  • 2017年03月29日 17:40
  • 2773

css3文本效果

css3文本效果text-shadow,word-wrap text-shadow: 在css3中我们可以给单调的文字加上阴影效果,赋予文字美感; text-shadow:h-shadow v-sh...
  • u014150409
  • u014150409
  • 2015年04月09日 22:22
  • 411

溢出文本自动带省略号省略(text-overflow: ellipsis;)的方法

使用text:overflow: ellipsis;的样式可以将溢出的文本自动裁剪,同时将裁剪部分标注为半个省略号。使用方法如下: div { width: 200px; ...
  • H_O_L_Y
  • H_O_L_Y
  • 2016年06月28日 11:59
  • 285

CSS3 新增文本属性

text-overflow 设置或检索是否使用一个省略标记。有两个属性值,一个是clip,是默认属性,一个是ellipsis,内容溢出部分用身略好显示。要和over-flow:hidden和whi...
  • qq_27603235
  • qq_27603235
  • 2016年01月17日 11:44
  • 359

CSS3属性之text-overflow:ellipsis详解

1.语法:text-overflow:clip|ellipsis 默认值:clip; 适用于:所有元素 clip:当前对象内文本溢出时不显示省略标记(...),而是将溢出部分裁剪。 ellipsis:...
  • u013084331
  • u013084331
  • 2016年03月14日 14:17
  • 2675

text-overflow文本溢出的全兼容CSS代码

text-overflow文本溢出的浏览器全兼容CSS代码。
  • QiZi_Zpl
  • QiZi_Zpl
  • 2017年08月29日 16:04
  • 513

css3文字霓虹灯光效果

css3文字霓虹灯光效果         *{   margin: 0;   padding: 0; } body{   background-color: ...
  • wustzbq0713
  • wustzbq0713
  • 2015年06月06日 13:29
  • 1209

纯CSS3实现的表单输入高亮效果

纯CSS3实现的网页表单输入高亮效果,不插入任何的JS代码,实现输入框高亮显示。这里使用fieldset固定表单,是个不错的主意。...
  • life66881
  • life66881
  • 2015年06月21日 12:46
  • 1375

CSS基础:text-overflow:ellipsis溢出文本显示省略号的详细方法_CSS教程

语法:    text-overflow : clip | ellipsis    参数:    clip :  不显示省略标记(...),而是简单的裁切   (clip这个参数是不常用的...
  • ebw123
  • ebw123
  • 2013年12月22日 10:49
  • 34850
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css3的文本效果text-overflow
举报原因:
原因补充:

(最多只允许输入30个字)