Question

以下代码显示了如何通过具有overflow：hidden的div截断文本，然后在鼠标悬停时显示所有文本。问题是如果在div旁边或下面有其他文本，则会对下面的文本施加超级强制。因此很难阅读。 我希望div的背景不透明，以便文本更容易阅读。调整div的大小不是一个选项，因为这会导致布局“跳转”。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css"> 
div.test
{
width:12em; 
overflow:hidden; 
border:1px solid #000000;
height:20px;
background-color:white
}

div.test:hover
{
text-overflow:inherit;
overflow:visible;
background-color:white
}
</style>
</head>
<body>

<p>Hover over the two divs below, to see the entire text.</p>

<div class="test" style="text-overflow:ellipsis;">This is some long text that will not fit in the box</div>
<div class="test" style="text-overflow:clip;">This is some long text that will not fit in the box</div>

</body>
</html>

Answer 1

找到了这个解决方案。（编辑：修复了鼠标悬停时调整大小/跳转元素的问题。已更新代码）

http://jsfiddle.net/Vm4Xg/4/

body { background: #ccc; }
.wrapper { white-space: nowrap; }
.wrapper .field { 
    width: 100px;
    overflow: hidden;
    display: block;
    text-overflow: ellipsis;
}
.wrapper .field:hover { 
    position: relative;    
    overflow: visible; }
.wrapper .field span { background: #fff; }

<div class="wrapper"> 
    <span class="field"><span>field 1 - Some long text in here that gets cut off.</span></span>
    <span class="field"><span>field 2 - Some long text in here that gets cut off.</span></span>
</div>

Answer 2

我知道这可能不是你想要的，但是你可以将每个div设置为“position：absolute”，设置它们的位置，然后在“div.test：hover”中添加“z-index” “上课？它不是最优雅的（我不是手动定位元素的粉丝），但它应该做你所描述的（即......没有元素“跳跃”）。

使div背景不透明，以便可以读取溢出文本？

2 个答案: