CSS 怎样让文本框里的字超过字数后，可以缩略显示变成点，当鼠标移上后又会全部显示出来

html-css028

CSS 怎样让文本框里的字超过字数后，可以缩略显示变成点，当鼠标移上后又会全部显示出来,第1张

<html>

<head>

<title>测试</title>

</head>

<body>

<style>

*{margin:0padding:0}

ul{font:14px/30px 宋体}

a{text-decoration:none}

li a{

width:100px

display:block/*内联对象需加*/

word-break:keep-all/* 不换行 */

white-space:nowrap/* 不换行 */

overflow:hidden/* 内容超出宽度时隐藏超出部分的内容 */

text-overflow:ellipsis/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden一起使用。*/

}

li a:hover{

width:auto

/*或者width:100%*/

}

</style>

<ul>

<li><a href="#">这是是文字哦哦哦哦哦哦哦哦哦哦哦哦</a></li>

<li><a href="#">这是是文字哦哦哦哦哦哦哦哦哦哦哦哦</a></li>

<li><a href="#">这是是文字哦哦哦哦哦哦哦哦哦哦哦哦</a></li>

<li><a href="#">这是是文字哦哦哦哦哦哦哦哦哦哦哦哦</a></li>

<li><a href="#">这是是文字哦哦哦哦哦哦哦哦哦哦哦哦</a></li>

</ul>

</body>

</html>

width:150px/*要显示文字的宽度*/overflow:hidden/*超出的部分隐藏起来。*/ white-space:nowrap/*不显示的地方用省略号...代替*/text-overflow:ellipsis/* 支持 IE */