快捷导航
蚂蚁部落 网站首页 前端教程 CSS3教程 查看内容

栏目导航

≡文本≡

≡颜色≡

≡单位≡

≡渐变≡

≡边框≡

≡背景≡

≡transform变换≡

≡transition过渡≡

≡animation动画≡

≡column多列布局≡

≡flex弹性布局≡

≡其他≡

CSS3 text-overflow

2018-1-20 12:06| 发布者: admin| 查看: 994| 评论: 0|来自: 蚂蚁部落

截取字符串是常见操作,通常由后台或JavaScript来完成,具体参阅js截取字符串代码实例一章节。

当前CSS提供了对应属性够实现此功能,那就是本章节将要介绍的text-overflow属性。

语法结构:

[CSS] 纯文本查看 复制代码
text-overflow:clip | ellipsis

参数解释:

(1).clip:此属性值表示直接裁切,并不显示省略标记(...)。

(2).ellipsis:此属性可以设置当文本溢出时将显示省略标记(...)。

特别说明:需要overflow:hidden和white-space:nowrap配合使用才能够生效。

代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>蚂蚁部落</title> 
<style type="text/css"> 
div{
  width:180px; 
  height:30px;
  line-height:30px;
  border:1px solid green;
  margin-top:50px;
}
div:hover{
  overflow:visible;
}
</style>
</head>
<body>
<div style="text-overflow:ellipsis">蚂蚁部落欢迎您,分享互助是进步的最大源动力。</div>
<div style="text-overflow:clip">蚂蚁部落欢迎您,分享互助是进步的最大源动力。</div>
</body>
</html>

由于没有overflow:hidden和white-space:nowrap配合,所以设置无效。

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>蚂蚁部落</title> 
<style type="text/css"> 
div{
  width:180px; 
  height:30px;
  line-height:30px;
  overflow:hidden; 
  white-space:nowrap; 
  border:1px solid green;
  margin-top:10px;
}
div:hover{
  overflow:visible;
}
</style>
</head>
<body>
<div style="text-overflow:ellipsis">蚂蚁部落欢迎您,分享互助是进步的最大源动力。</div>
<div style="text-overflow:clip">蚂蚁部落欢迎您,分享互助是进步的最大源动力。</div>
</body>
</html>
1

鲜花

握手

雷人

路过

鸡蛋

刚表态过的朋友 (1 人)

上一篇:CSS3 ::Selection下一篇:CSS3 word-wrap

最新评论

关于我们|手机版|小黑屋| ( 鲁ICP备10022556号-3 )

GMT+8, 2018-2-19 15:50 , Processed in 0.098357 second(s), 21 queries .

Powered by Discuz! X3.2 Licensed

Copyright © 2012-2017 Design: 蚂蚁部落

返回顶部