CSS文字超出长度用省略号替代

快乐打工仔 分类:实例代码

CSS文字超出长度用省略号替代属于前端实例代码,有关更多实例代码大家可以查看

分享一段代码实例,它利用css实现了截取超长的字符串的功能。

代码实例如下:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.pipipi.net/" /> 
<title>犀牛前端部落</title>
<style type="text/css"> 
.thediv{ 
  width:250px;
  height:30px;
  line-height:30px;
  overflow:hidden; 
  white-space:nowrap;
  text-overflow:ellipsis;
  background-color:red
} 
</style> 
</head> 
<body> 
<div class="thediv">犀牛前端部落欢迎您,只有奋斗才会有美好的明天!</div>
</body> 
</html>

可以截取字符串,并且多余的以三个点表示,如要使用了如下代码:

overflow:hidden; 
white-space:nowrap;
text-overflow:ellipsis;

特别说明:不能少了overflow:hidden,否则无效。

相关阅读:

(1).white-space属性参阅CSS white-space一章节。 

(2).text-overflow属性参阅CSS text-overflow一章节。 

CSS文字超出长度用省略号替代,这样的场景在实际项目中还是用的比较多的,关于CSS文字超出长度用省略号替代就介绍到这了。

回复

我来回复
  • 暂无回复内容