Question

这是我的PHP代码，即使用echo html

echo "<li style='width:" . $iw . "px;height:" . $ih . "px;overflow:hidden;font-size:" .     $ifo . "px; margin:5px' onClick='playVideo($c,\"" . urlencode($f) . "\",\"$m\",\"$p2\", \""  . urlencode($d) . "\", \"$a\", $dur, $iwo, $iho,$scale)' id='li$c'>";
    echo "<div id='vidthumbnail' class='imgdesc'>
    <div id='vidinfo1' class='vidthumbclass'>
        <img style='margin-right: 5px; height: 20px; width: 20px' src='images/red.png'/>
        <text style='margin-right: 2px'> $d </text> 
        <text style='color: grey; font-weight: normal; position: relative; left: 20%'>$ph_days</text>
    </div>
    <div id='vidthumbicon'><img src='test.png' style=' width: 40px; height: 40px; vertical-align: auto' /></div>
    <div id='vidinfo2' class='vidthumbclass'>
        <img src='images/love.png'/>
        <text>$ph_loves</text>
        <img src='images/grey.png'/>
        <text>$ph_dislikes</text>
        <img src='images/sh.png'/>
        <text style='vertical-align: middle' >$ph_shares</text>
    </div>
  </div>"; // TODO do text overflow
echo "<img style='position:absolute;z-index:1;width:" . $iw . "px;height:" . $ih . "px;'     src='$p2' width=$iw height=$ih/>";
echo "</li>";

这是我的css代码，或者至少是重要部分：

#vidthumbnail {
    position:absolute;
    z-index:200;
    width:100%;
    height:100%;
    top: 0%;
}

img {
    height: 16px;
    width: 16px;
    padding-top: 2px;
    padding-left:2px;
    vertical-align: middle;
}

text {
    vertical-align: middle;
    margin-right: 10px;
}

.vidthumbclass {
    font-family: Helvetica, Arial, sans-serif;
    height: 20px;
    color: black;
    font-size: 12px;
    font-weight: bold;
    background: rgba(255, 255, 255, .6); 

    -moz-border-radius: 5px;
    border-radius: 5px;
    margin-right: 5px;
    margin-left:  5px;
    position: absolute;
    width: 95%;

    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

#vidinfo1 { 
    vertical-align: middle;
    margin-top: 5px;
}

#vidthumbicon {
    position: absolute;
    top: 35%;
    left: 40%;
}

#vidinfo2 {  
    vertical-align: middle;
    top: 80%;
}

当文本太长时，我一直试图让vidinfo1 div中的文本$ d溢出到省略号。它工作，但它在div的末尾溢出，这意味着php字符串$ d仍然与字符串$ ph_days $重叠。我一直试图让$ d在$ ph_days文本之前重叠，方法是通过html和css中的text属性设置$ d文本的宽度，但它没有用。

如何让字符串在文本之间重叠？

Answer 1

.front-div {
    background: transparent;
    z-index: 99999;
}
.back-div {
    background: transparent;
    z-index: 1;
}

希望这有帮助

使文本溢出工作而不重叠

1 个答案: