CSS float:left和overflow:可见的剪切文本

CSS float:left and overflow:visible cutting off text

本文关键字：文本 overflow float left CSS      更新时间：2023-09-26

我目前正在尝试用javascript制作一个颜色渐变，其中一些div中的数值表示为比例。然而，我注意到，对于较大的值，数字会由于float而被截断：left。我也尝试过使用display:inline块，但它的位置似乎很奇怪，并且在它们之间留下了间隙。我需要将div一起刷新，但只需要在下面的div的顶部有文本溢出。有办法做到这一点吗？

我提到的两个例子都在这里：

http://jsfiddle.net/y3LTZ/3/

<div style="overflow: visible; width: 600px; height: 30px;white-space: nowrap;">
    <div style="width:20px;height:100%;overflow: visible;display:inline-block;background-color:red;">texts</div>
    <div style="width:20px;height:100%;overflow: visible;display:inline-block;background-color:green;"></div>
    <div style="width:20px;height:100%;overflow: visible;display:inline-block;background-color:red;">texts</div>
    <div style="width:20px;height:100%;overflow: visible;display:inline-block;background-color:green;"></div>
    <div style="width:20px;height:100%;overflow: visible;display:inline-block;background-color:red;">texts</div>
</div>

和

<div style="overflow: visible; width: 600px; height: 30px;white-space: nowrap;">
    <div style="width: 20px;height:100%;float:left;background-color:red;">texts</div>
    <div style="width: 20px;height:100%;float:left;background-color:green;"></div>
    <div style="width: 20px;height:100%;float:left;background-color:red;">texts</div>
    <div style="width: 20px;height:100%;float:left;background-color:green;"></div>
    <div style="width: 20px;height:100%;float:left;background-color:red;">texts</div>
</div>

谢谢！

DEMO

使用内联块

HTML

<div class="wrapper">
    <div class="single-block red">texts</div>
    <div class="single-block green"></div>
    <div class="single-block red">texts</div>
    <div class="single-block green"></div>
    <div class="single-block red">texts</div>
</div>

CSS

.wrapper{
    width: 600px; 
    height: 30px;
    white-space: nowrap;
    font-size:0;
}
.single-block{
   width:20px;
   height:100%;
   display:inline-block;
   vertical-align:bottom;
    font-size:16px;
}
.red{
    background-color:red;
    position:relative;
}
.green{
    background-color:green;
}

如果你想让文本与下面的div重叠，你必须给它们position:absolute;

<div style="position: relative; overflow: visible; width: 600px; height: 30px;white-space: nowrap;">
    <div class="column" style="background-color:red;">
        <div class="textontop">texts</div>
    </div>
    <div class="column" style="background-color:green;"></div>
    <div class="column" style="background-color:red;">
        <div class="textontop">texts</div>
    </div>
    <div class="column" style="background-color:green;"></div>
    <div class="column" style="background-color:red;">
        <div class="textontop">texts</div>
    </div>
</div>

Css:

.column {
    width:20px;
    height:100%;
    overflow: visible;
    float:left;
    z-index:0;
}
.textontop {
    position:absolute;
    z-index:999;
}

Js文件：http://jsfiddle.net/y3LTZ/5/

相关文章：