转:div超出范围显示省略号

转自:http://www.111cn.net/cssdiv/56/32997.htm

<html >
<head>
<title>css div宽度自动隐藏并且显省略号</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<!--把下面代码加到<head>与</head>之间-->
<style type="text/css">
 #abc{
 display:block;/*内联对象需加*/
 width:200px;
 word-break:keep-all;/* 不换行 */
 white-space:nowrap;/* 不换行 */
 overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
 text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ;需与overflow:hidden;一起使*/
 }
 #cde{
  width:200px; /* 必须设置宽度 */
  word-break:keep-all;/* 不换行 */
  white-space:nowrap;/* 不换行 */
  overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
  text-overflow:ellipsis;/
 }
</style>
</head>
<body>
<div  id="abc">
fdsafdsaklfdjsaklf;djakl;fdjsakf;djsakfldajfklda;fjdsakl
</div>
<div  id="cde">
XXXXXXXXXXXXXXXXXXXXXSADFDFDSFDSFDSFDSFDSFSDX
</div>
</body>
</html>

你可能感兴趣的:(div)