这个问题绝不可怕,但这是我遇到的一个问题,并且想知道一些SO专家如何解决它 - 如果有解决方案的话.
我有一个固定宽度的UI小部件,显示文件信息.我提供了通过单击来编辑文件名的功能,并指示我:hover应用了一种样式来更改字体颜色的功能.最初我把文件名放在一个DIV,但由于不同的文件名是不同的长度我不能调整DIV到文件名的大小,并保持:hover效果紧张文本.对于短文件名,:hover当光标位于空白部分时,效果仍会显示DIV.这不是我想要的,所以我把文件名放在一个SPAN(与:hover效果一起)的解决方案.这解决了短文件名的问题,但阻止了长文件名与椭圆优雅地溢出.
理想情况下,我想要一个实现两种效果的解决方案 - 椭圆长文件名,并:hover仅在将鼠标悬停在实际文本上时应用效果.我对css还很新,所以也许我只是错过了一个明显的答案.谢谢!
这是一个显示问题的示例页面:(
和jsfiddle)
编辑:我想我可以执行一些javascript魔术来剪辑更长的名字,但希望有一个更简单的CSS解决方案.
<html>
<head>
<style>
div {
margin:10px;
width:200px;
max-width:200px;
font-size:1.2em;
overflow:hidden;
text-overflow:ellipsis;
}
div.a:hover, span:hover {
color:666;
cursor:pointer;
}
span {
display:inline-block;
}
</style>
</head>
<body>
<!-- This works well for long filenames -->
<div class="a">
ThisIsMyReallyReallyLongFilename.txt
</div>
<!-- ... but fails for the short names -->
<div class="a">
Shortname.txt
</div>
<!-- This fails to show ellipse for long filenames -->
<div>
<span>ThisIsMyReallyReallyLongFilename.txt</span>
</div>
<!-- ... but wraps the text nicely for short names -->
<div>
<span>Shortname.txt</span>
</div>
</body>
</html>
Scr*_*tor 22
像这样？(注意display:inline-block;从跨度中删除.)
<html>
<head>
<style>
div {
margin:10px;
width:200px;
max-width:200px;
overflow: hidden;
text-overflow:ellipsis;
font-size: 1.2em;
}
span:hover {
color:666;
cursor:pointer;
}
</style>
</head>
<body>
<!-- This now does show ellipse for long filenames -->
<div>
<span>ThisIsMyReallyReallyLongFilename.txt</span>
</div>
<!-- ... but wraps the text nicely for short names -->
<div>
<span>Shortname.txt</span>
</div>
</body>
</html>