0

私はこのようなdivを持っています:

<div style="width:500px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis pulvinar dui. Nulla ut metus molestie, dignissim metus et, tincidunt tellus. Fusce porttitor erat ut vestibulum fermentum. Mauris odio nisl, mattis sit amet fermentum sed, consequat non dui. Nullam porta posuere augue eu luctus. Phasellus vulputate, nisl et sagittis consequat, massa nunc pharetra massa, vitae rhoncus elit nisl non mauris. Phasellus sollicitudin venenatis dapibus. Aliquam molestie magna et adipiscing hendrerit. In tempus nulla ut tellus dictum laoreet. Phasellus non nulla tortor. Suspendisse sit amet diam sed velit dignissim tincidunt. 
</div>

ご覧のとおり、div の幅は固定されており、残りのコンテンツは非表示になっています。カーソルを合わせると、divのすべてのコンテンツを表示したいと思います(バブルなどのように)。これはプレーンな HTML で可能ですか、それとも JavaScript を使用するしかありませんか?

4

3 に答える 3

2

はい、ご利用いただければ可能ですhover。インライン スタイルをクラスに移動する必要があります。例については、ここを参照してください。

http://jsfiddle.net/buC6t/

.exdiv {
    width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; 
}
.exdiv:hover {
    overflow:visible;
}

<div class="exdiv">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis pulvinar dui. Nulla ut metus molestie, dignissim metus et, tincidunt tellus. Fusce porttitor erat ut vestibulum fermentum. Mauris odio nisl, mattis sit amet fermentum sed, consequat non dui. Nullam porta posuere augue eu luctus. Phasellus vulputate, nisl et sagittis consequat, massa nunc pharetra massa, vitae rhoncus elit nisl non mauris. Phasellus sollicitudin venenatis dapibus. Aliquam molestie magna et adipiscing hendrerit. In tempus nulla ut tellus dictum laoreet. Phasellus non nulla tortor. Suspendisse sit amet diam sed velit dignissim tincidunt. 
</div>
于 2013-06-26T21:15:26.313 に答える
0

バブルが必要な場合は、js を使用しないとコンテンツが重複しますが、可能です: http://jsfiddle.net/7e4hC/

<div style="width:500px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;" class="test">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis pulvinar dui. Nulla ut metus molestie, dignissim metus et, tincidunt tellus. Fusce porttitor erat ut vestibulum fermentum. Mauris odio nisl, mattis sit amet fermentum sed, consequat non dui. Nullam porta posuere augue eu luctus. Phasellus vulputate, nisl et sagittis consequat, massa nunc pharetra massa, vitae rhoncus elit nisl non mauris. Phasellus sollicitudin venenatis dapibus. Aliquam molestie magna et adipiscing hendrerit. In tempus nulla ut tellus dictum laoreet. Phasellus non nulla tortor. Suspendisse sit amet diam sed velit dignissim tincidunt. 
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis pulvinar dui. Nulla ut metus molestie, dignissim metus et, tincidunt tellus. Fusce porttitor erat ut vestibulum fermentum. Mauris odio nisl, mattis sit amet fermentum sed, consequat non dui. Nullam porta posuere augue eu luctus. Phasellus vulputate, nisl et sagittis consequat, massa nunc pharetra massa, vitae rhoncus elit nisl non mauris. Phasellus sollicitudin venenatis dapibus. Aliquam molestie magna et adipiscing hendrerit. In tempus nulla ut tellus dictum laoreet. Phasellus non nulla tortor. Suspendisse sit amet diam sed velit dignissim tincidunt.</span></div>

.test span {
    display: none;
}
.test:hover span {
    display: block;
    width: 500px;
    background-color: #ddd;
    overflow: visible;
    white-space: normal;
}

またはさらにクリーン：

<div style="width:500px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;" class="test">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis pulvinar dui. Nulla ut metus molestie, dignissim metus et, tincidunt tellus. Fusce porttitor erat ut vestibulum fermentum. Mauris odio nisl, mattis sit amet fermentum sed, consequat non dui. Nullam porta posuere augue eu luctus. Phasellus vulputate, nisl et sagittis consequat, massa nunc pharetra massa, vitae rhoncus elit nisl non mauris. Phasellus sollicitudin venenatis dapibus. Aliquam molestie magna et adipiscing hendrerit. In tempus nulla ut tellus dictum laoreet. Phasellus non nulla tortor. Suspendisse sit amet diam sed velit dignissim tincidunt.</div>

.test:hover {
    display: block;
    background-color: #ddd;
    overflow: visible;
    white-space: normal !important;
}
于 2013-06-26T21:20:18.597 に答える
0

非常に基本的な非 CSS 非 JavaScript アプローチとして、ツールチップを使用できます。

<div style="width:500px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"
        title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis pulvinar dui. Nulla ut metus molestie, dignissim metus et, tincidunt tellus. Fusce porttitor erat ut vestibulum fermentum. Mauris odio nisl, mattis sit amet fermentum sed, consequat non dui. Nullam porta posuere augue eu luctus. Phasellus vulputate, nisl et sagittis consequat, massa nunc pharetra massa, vitae rhoncus elit nisl non mauris. Phasellus sollicitudin venenatis dapibus. Aliquam molestie magna et adipiscing hendrerit. In tempus nulla ut tellus dictum laoreet. Phasellus non nulla tortor. Suspendisse sit amet diam sed velit dignissim tincidunt. ">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis pulvinar dui. Nulla ut metus molestie, dignissim metus et, tincidunt tellus. Fusce porttitor erat ut vestibulum fermentum. Mauris odio nisl, mattis sit amet fermentum sed, consequat non dui. Nullam porta posuere augue eu luctus. Phasellus vulputate, nisl et sagittis consequat, massa nunc pharetra massa, vitae rhoncus elit nisl non mauris. Phasellus sollicitudin venenatis dapibus. Aliquam molestie magna et adipiscing hendrerit. In tempus nulla ut tellus dictum laoreet. Phasellus non nulla tortor. Suspendisse sit amet diam sed velit dignissim tincidunt. 
</div>

この div の上にマウスを置くと、ツールチップにテキストが表示されます。titleまた、最初は空白のままにして、JavaScript に次のようなものを入力することもできます。

myDivObj.title = myDivObj.innerHTML;
于 2013-06-26T21:18:41.220 に答える