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

如上图那样的,字数多了就变成几个点,而鼠标靠上后,又全部显示出来,请问这种怎么下手,怎么弄啊,新手求解,谢谢大家,请问这种表单系统里很多都是,如果改动在哪里改动,可以实现这种效果呢?

<html>
<head>
<title>测试</title>
</head>
<body>
<style>
*{margin:0;padding: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>

温馨提示:内容为网友见解,仅供参考
第1个回答  2013-10-09
<div style="width:100px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis">大连一号仓库一号一号</div>

鼠标移上去,,你可以用TIPS来显示,或者用title来显示就可以了,这样不会影响布局,本回答被提问者和网友采纳

CSS 怎样让文本框里的字超过字数后,可以缩略显示变成点,当鼠标移上后...
鼠标移上去,,你可以用TIPS来显示,或者用title来显示就可以了,这样不会影响布局,

怎样用PHP实现鼠标移到文字上,在不点击的情况下会在指定的地方显示指定...
是不是这样?文字 这是css和js,不是php

鼠标放在超链接上, 显示DIV。 移开后隐藏DIV。
1、首先我们在html里定义一个div,id为‘mouse_div’,然后定义该div的样式,主要是定义position,让其绝对定位。2、然后通过JS脚本来做随鼠标移动的效果。先引入jquery脚本,因为用到jquery操作dom。3、最后添加代码,在页面加载完后,给页面添加鼠标mousemove事件,在事件函数里,调用 moving方法,就实现d...

如何用CSS,将文字隐藏在图片之下,然后将鼠标移到图片上就会浮现出来,下 ...
class="img">这里放图片 这里放文字 这里放图片 这里放文字 这里放图片 这里放文字 这里放图片 这里放文字

css如何实现鼠标移至图片上显示遮罩层及文字
1.首先看看HTML、一个img图像控件和一个带掩码样式的div,其中包含文本。这是蒙版层。2.然后,查看样式定义。首先,查看图像容器和图像的样式,如图所示。这主要是准备我们的绝对定位口罩。3.看看蒙版层的样式定义。代码如图所示。背景:rgba(0,0,0,0.7);透明度可以通过修改后面的0.7号来改变。1是...

CSS 怎样让文本框里的字超过字数后,可以缩略显示变成点,当鼠标移上后...
\/* 内容超出宽度时隐藏超出部分的内容 *\/text-overflow:ellipsis;\/* 当对象内文本溢出时显示省略标记(...) ;需与overflow:hidden;一起使用。*\/}li a:hover{width:auto;\/*或者width:100%;*\/}这是是文字哦哦哦哦哦哦哦哦哦哦哦哦这是是文字哦哦哦哦哦哦哦哦哦哦哦哦这是是文字哦哦哦哦哦...

相似回答