14

私は次のことをしようとしています。<div>特定の幅を持ち、その30%中に1行以上のテキストがありますが、テキストが長すぎる場合は表示したいのですが、レスポンシブである...ため、幅も<div>変化します設計されているため、それ...に応じて調整する必要があります。しかし、人がその上にカーソルを置いた場合、その<div>幅を拡張し (絶対に配置されるため、特定の境界線から出ることが許可されます)、すべてのテキストを同じ行に表示する必要があります。

例：

This is text that fits



This is text that doesn't fit inside ...



This is text that doesn't fit inside, but is visible on hover.

HTML純粋で動作するクロスブラウザで実行できるかどうかわからない場合はCSS、オーバーフローの非表示のバックアップがあるのではないでしょうか? またはJQuery、他では達成できない場合。

4

2 に答える 2

5

これは、ピクセル幅に基づく css3 バージョンです。このテキストが動作する特定のサイズのコンテナがある場合は、 width: 100%; を使用できます。その中で働くこと。

jsfiddle

<p>This is text that doesn't fit inside, but is visible on hover.</p>


p {
    display: inline-block;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
p:hover {
    max-width: none;
}
于 2013-06-01T10:15:49.920 に答える