0

テキストを含む 2 つの div があります。これらは、高さと幅が固定された親 Div 内にカプセル化されます。親 div の外にテキストがはみ出す場合は、テキストを楕円形にしたいと考えています。

ここに私のHTMLがあります

<html>
<head>
    <style>

    .pDiv {
        width:50px;
        height:20px;
        border: 1px  solid red;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .div1 {
        position: relative;
        float: left;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .div2 {
        position: relative;
        float: left;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    </style>
</head>
<body>
    <div class ='pDiv'>
        <div class ='div1'>test testing</div>
        <div class ='div2'>test1</div>
    </div>

</body>
</html>

div1 テキストが長い場合、または div2 テキストが長い場合、テキストを省略して表示したいと考えています。

解決策はありますか？

4

1 に答える 1

1

div1 と div2 には幅が割り当てられていないため、楕円は表示されません。そのため、どの時点で切り捨て/省略を開始するかがわからないためです。おそらく、それぞれに 100% の幅を割り当てることができます。つまり、 width:100% 両方のクラスに追加すると、テキストに省略記号が表示されます。

次のリンクを参照することをお勧めします: http://www.quirksmode.org/css/textoverflow.html問題とその要件について説明しています。

于 2012-08-07T18:09:54.110 に答える