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

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

html css

Html 使div背景不透明以便可以读取溢出文本？,html,css,Html,Css,下面的代码显示了如何让文本被带有溢出的div截断：hidden，然后在鼠标悬停时显示所有文本。问题是，如果div旁边或下面有其他文本，那么它将被超级强加在下面的文本上。因此它很难阅读我希望div的背景是不透明的，这样文本更容易阅读。调整div的大小不是导致布局“跳转”的选项分区测试 { 宽度：12em；溢出：隐藏；边框：1px实心#000000；高度：20px；背景颜色：白色 } 分区测试：悬停 { 文本溢出：继承；溢出：可见；背景颜色：白色 } 将鼠标悬停在下面的两个div上，

下面的代码显示了如何让文本被带有溢出的div截断：hidden，然后在鼠标悬停时显示所有文本。问题是，如果div旁边或下面有其他文本，那么它将被超级强加在下面的文本上。因此它很难阅读我希望div的背景是不透明的，这样文本更容易阅读。调整div的大小不是导致布局“跳转”的选项


分区测试
{
宽度：12em；
溢出：隐藏；
边框：1px实心#000000；
高度：20px；
背景颜色：白色
}
分区测试：悬停
{
文本溢出：继承；
溢出：可见；
背景颜色：白色
}
将鼠标悬停在下面的两个div上，以查看整个文本
这是一些长文本，无法放入框中
这是一些长文本，无法放入框中

我知道这可能不是您想要的，但是您可以将每个div设置为“position:absolute”，设置它们的位置，然后将“z-index”添加到“div.test:hover”类中吗？它不是最优雅的（我不喜欢手动定位元素），但它应该符合您的描述（即，没有元素“跳跃”）。

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

body{背景：#ccc；}
.wrapper{空白：nowrap；}
.wrapper.field{
宽度：100px；
溢出：隐藏；
显示：块；
文本溢出：省略号；
}
.wrapper.field:悬停{
位置：相对位置；
溢出：可见；}
.wrapper.field span{background:#fff；}
字段1-此处的一些长文本被截断。
字段2-此处的一些长文本被截断。

<!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>

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>