codetc - 网站开发技术 首页 前端 查看内容

CSS让超出的文字显示为省略号

2015-1-4 01:01| 发布者: CODETC| 查看: 1430| 评论: 0

为了页面布局的合理性与美观性,对文字的显示样式进行限制、设定是CSS中最常用的地方之一,比如以下几种情况:

强制不换行
div {
white-space:nowrap;
}

自动换行
div{ 
word-wrap: break-word; 
word-break: normal; 
}

强制英文单词断行
div{
word-break:break-all;
}


我们在行列时,经常会出现一行文字超出了宽度,很多人使用了 overflow:hidden,让超出来的内容隐藏,有没有一种方法能让文字超出时显现省略号呢?

可以使用这种方法:white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis;
<html>
<head>
<title>www.codetc.com</title>
<style>
div.wid{ 
	width:200px;
	white-space:nowrap;
	text-overflow:ellipsis; 
	-o-text-overflow:ellipsis; 
	overflow: hidden;
}
</style>
</head>
<body>
<div class="wid">
	<a href="http://www.codetc.com/">CSS让超出的文字显示为省略号|CODETC-PHP网站开发技术</a>
</div>
</body>
</html>
文章来源 CODETC,欢迎分享,转载请注明地址: http://www.codetc.com/article-112-1.html

最新评论

 作为游客发表评论,请输入您的昵称

返回顶部