Как обрезать часть текста, а при наведении на него показать полный текст

[Extalionez]

Доброго времени суток! Есть <td> с длинным текстом внутри. Встала естественная в таких случаях необходимость минимизации занимаемого этим текстом пространства на странице. Конечно до меня кто-то этим уже заморачивался, но у меня не хватило ума найти решения моей проблемы. Чуть подробнее:
Нужно чтобы вот такой код

Спойлер

<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer euismod ornare mollis. Praesent sed dignissim turpis. Pellentesque ultricies iaculis orci at ultricies. Sed eget sapien a est congue eleifend. Vestibulum vulputate cursus ligula, a tincidunt erat euismod eget. Quisque in mi eget orci lobortis scelerisque a vel felis. Nam ullamcorper pretium tortor a accumsan. Pellentesque lectus massa, eleifend eu tincidunt molestie, volutpat at nisl. Praesent pretium odio id mi porta ut accumsan justo euismod. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
 
Aenean libero lacus, ultrices sed pulvinar eget, lacinia eget nulla. Aliquam id nulla ante. Vivamus id lacus quis risus egestas condimentum. Nulla tempus euismod malesuada. Donec tristique consectetur vehicula. Phasellus tortor augue, mattis ac eleifend eu, suscipit in massa. Praesent sed mi quam. Quisque quis luctus ligula. Aliquam erat volutpat. Morbi congue dolor magna. Sed sed felis in felis faucibus mattis. Nulla felis massa, volutpat eu laoreet eget, mollis sed nisl.
 
Nulla velit ipsum, malesuada nec rhoncus sed, sodales vel eros. Nulla facilisi. Donec eget arcu et nisl ultrices consequat. Vestibulum dignissim tempus massa vitae accumsan. Pellentesque vestibulum lobortis nisi, et varius odio pretium tempor. Donec urna quam, sodales eget tempor ac, faucibus vitae est. Cras gravida volutpat augue faucibus iaculis. Quisque ut lectus id risus convallis laoreet a vitae lorem. Proin quis eros a lorem commodo hendrerit. Pellentesque a velit vitae sapien egestas commodo rutrum vitae felis. Aliquam augue mauris, varius vel imperdiet vitae, dapibus et ipsum. Praesent pellentesque ullamcorper leo nec placerat. Nullam a sapien ac metus vestibulum lacinia id ut enim. Fusce eu tortor sit amet libero scelerisque scelerisque id non odio. Aenean at leo non dui dictum scelerisque semper quis diam. Maecenas consequat elementum tortor cursus sollicitudin.
 
Donec imperdiet sapien sed libero pharetra vulputate. Praesent in mauris sit amet dolor cursus vestibulum. Donec nisi diam, pretium non scelerisque sit amet, placerat non dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent at dui eget sem elementum blandit. Nulla fringilla, felis ut elementum interdum, elit ante volutpat neque, ac consequat elit mauris et mi. Donec lobortis, ipsum at euismod sollicitudin, nisl leo mollis augue, et molestie tellus risus ut eros. Vestibulum non dui id turpis sagittis pulvinar. Nam quis sapien vitae nisi hendrerit elementum ac nec ipsum.
 
Donec egestas augue id purus viverra tempus. Curabitur interdum malesuada arcu eget convallis. Aliquam porttitor justo sodales velit pretium fringilla. Mauris aliquam turpis id dui gravida id egestas sapien molestie. Duis ante dui, mattis id consequat ac, rhoncus quis tortor. Sed bibendum orci velit. Nulla est odio, semper vitae malesuada et, viverra in nunc. Proin fringilla porta massa, nec pulvinar neque vehicula sit amet. Duis convallis, tortor at ornare imperdiet, velit enim posuere enim, ac posuere dui libero vitae enim.
</td>

'превращался' в

<td>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer euismod ornare mollis. Praesent sed dignissim turpis. Pellentesque ultricies iaculis orci at ultricies. Sed eget sapien a est congue eleifend. Vesti...
</td>

а при наведении на этот <td> появлялся поверх него оригинал текста. То есть недостаточно просто обрезать текст, а по наведении показать весь, а именно чтоб поверх него появилось окно с полным содержанием текста.

 

[Mizantrop]

Ява-скрипт Вам в помощь..... OnMouseOver и OnMouseOut , объект можно выставить любой, картинку, текст или скрипт каскадом...

 

[Extalionez]

Ява-скрипт Вам в помощь.....OnMouseOver и OnMouseOut , объект можно выставить любой, картинку, текст или скрипт каскадом...

Я конечно ламер, но про события java-скрипта знаю . Вопрос в конкретном примере, а не в том что как это сделать .

 

[Mizantrop]

Я конечно ламер, но про события java-скрипта знаю . Вопрос в конкретном примере, а не в том что как это сделать .

Сударь, вы поймите, что ваш вопрос разрешится только САМОСТОЯТЕЛЬНЫМ написанием нескольких строчек того-же Ява-скрипта, но под конкретные ваши условия/переменные/пути, тут никто НАХАЛЯВУ работать/писать не будет.

Ваша задача неоднократно описана во всяких сетевых учебниках HTML. Также можно "подсмотреть" как это реализовано на Джумле, пошарьтесь по демкам "Рулезных" шаблонщиков.... RT...

 

[Extalionez]

Так никто и не просит написать готовый код. Мне нужен лишь пример или ещё лучше статья где описано как это сделать - у самого руки кривые найти

 

[Mizantrop]

Вот статейка
Для просмотра ссылки Войди или Зарегистрируйся

С небольшими ошибками, но сделано правильно....

 

[bork75]

Не программер, написал простенький вариант, я бы сделал так

<style>
.style_a {width:500px; height:20px; overflow: hidden; border:1px solid red}
.style_b {width:100%; height:auto; border:1px solid red}
 
</style>
 
<p  id="my_style" onMouseOver="my_style.className='style_b';" onMouseOut="my_style.className='style_a';" class="style_a">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer euismod ornare mollis. Praesent sed dignissim turpis. Pellentesque ultricies iaculis orci at ultricies. Sed eget sapien a est congue eleifend. Vestibulum vulputate cursus ligula, a tincidunt erat euismod eget. Quisque in mi eget orci lobortis scelerisque a vel felis. Nam ullamcorper pretium tortor a accumsan. Pellentesque lectus massa, eleifend eu tincidunt molestie, volutpat at nisl. Praesent pretium odio id mi porta ut accumsan justo euismod. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p>

 

[Extalionez]

Не программер, написал простенький вариант, я бы сделал так

<style>
.style_a {width:500px; height:20px; overflow: hidden; border:1px solid red}
.style_b {width:100%; height:auto; border:1px solid red}
 
</style>
 
<p  id="my_style" onMouseOver="my_style.className='style_b';" onMouseOut="my_style.className='style_a';" class="style_a">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer euismod ornare mollis. Praesent sed dignissim turpis. Pellentesque ultricies iaculis orci at ultricies. Sed eget sapien a est congue eleifend. Vestibulum vulputate cursus ligula, a tincidunt erat euismod eget. Quisque in mi eget orci lobortis scelerisque a vel felis. Nam ullamcorper pretium tortor a accumsan. Pellentesque lectus massa, eleifend eu tincidunt molestie, volutpat at nisl. Praesent pretium odio id mi porta ut accumsan justo euismod. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p>

а почему интересно IE это счастье не понимает?

 

[Sunday]

Нафиг тут JS?

 

[bork75]

Нафиг тут JS?

аха-ха )) вопрос же в разделе JS!
Просто из моего примера можно доделать всплывающую подсказку.

Кстати, ie6, вроде, не будет понимать .hover:hover он только так должен понимать a.hover:hover (ну это так к сведению, а вообще пофиг на старые браузеры)

а почему интересно IE это счастье не понимает?

вместо my_style.className='style_b' можно попробовать document.getElementById('my_style').className =' style_b';