<style type="text/css">
#content {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
width: 200px;
}
</style>
<script type="text/javascript">
onload = function() {
content.onmouseover = function() {
this.title = this.innerHTML;
}
}
</script>
<script type="text/javascript" src="cl/jquery-2.1.1.min.js">
</script>
</head>
<body>
<div id='content'>
js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示 js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示 js
文字超出长度用省略号代替,鼠标悬停并以悬浮框显示 js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示
</div>
</body>
原理:
本方法用于解决表格单元格内容过多时的美观问题,主要涉及到4句CSS样式:
-
table-layout: fixed 由于table-layout的默认值是auto,即table的宽高将取决于其内容的多寡,如果内容的体积无法估测,那么最终表格的呈现形式也无法保证了,fixed一下就好了。(注意:此样式是关键)
-
white-space: nowrap 是为了保证无论单元格(TD)中文本内容有多少,都不会自动换行,此时多余的内容会在水平方向撑破单元格。
-
overflow: hidden 隐藏超出单元格的部分。
-
text-overflow: ellipsis 将被隐藏的那部分用省略号代替。