0

これは私の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 テキストの幅を html と css の text 属性で設定して、$ph_days テキストの前に $d をオーバーラップさせようとしましたが、うまくいきませんでした。

文字列をテキスト間でオーバーラップさせるにはどうすればよいですか?

4

1 に答える 1