html - 让文本溢出工作而不重叠

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$ 重叠。我一直试图通过 html 和 css 中的文本属性设置 $d 文本的宽度，让 $d 在 $ph_days 文本之前重叠，但它没有用。

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

Answer 1

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

希望对你有帮助