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

Тема в разделе "JavaScript", создана пользователем Extalionez, 21 ноя 2012.

Модераторы: ZiX
  1. Extalionez

    Extalionez Клоун

    Заблокирован
    Регистр.:
    21 авг 2008
    Сообщения:
    368
    Симпатии:
    185
    Доброго времени суток! Есть <td> с длинным текстом внутри. Встала естественная в таких случаях необходимость минимизации занимаемого этим текстом пространства на странице. Конечно до меня кто-то этим уже заморачивался, но у меня не хватило ума найти решения моей проблемы. Чуть подробнее:
    Нужно чтобы вот такой код
    HTML:
    <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>

    'превращался' в
    HTML:
    <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> появлялся поверх него оригинал текста. То есть недостаточно просто обрезать текст, а по наведении показать весь, а именно чтоб поверх него появилось окно с полным содержанием текста.
     
  2. Mizantrop

    Mizantrop Постоялец

    Регистр.:
    26 июл 2007
    Сообщения:
    122
    Симпатии:
    42
    Ява-скрипт Вам в помощь..... OnMouseOver и OnMouseOut , объект можно выставить любой, картинку, текст или скрипт каскадом...
     
  3. Extalionez

    Extalionez Клоун

    Заблокирован
    Регистр.:
    21 авг 2008
    Сообщения:
    368
    Симпатии:
    185
    Я конечно ламер, но про события java-скрипта знаю:) . Вопрос в конкретном примере, а не в том что как это сделать:ah: .
     
  4. Mizantrop

    Mizantrop Постоялец

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

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

    Extalionez Клоун

    Заблокирован
    Регистр.:
    21 авг 2008
    Сообщения:
    368
    Симпатии:
    185
    Так никто и не просит написать готовый код. Мне нужен лишь пример или ещё лучше статья где описано как это сделать - у самого руки кривые найти
     
  6. Mizantrop

    Mizantrop Постоялец

    Регистр.:
    26 июл 2007
    Сообщения:
    122
    Симпатии:
    42
  7. bork75

    bork75 Д☼брая собака )

    Регистр.:
    21 июн 2008
    Сообщения:
    1.449
    Симпатии:
    716
    Не программер, написал простенький вариант, я бы сделал так

    HTML:
    <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 нравится это.
  8. Extalionez

    Extalionez Клоун

    Заблокирован
    Регистр.:
    21 авг 2008
    Сообщения:
    368
    Симпатии:
    185
    :nezn:а почему интересно IE это счастье не понимает?
     
  9. Sunday

    Sunday

    Регистр.:
    13 дек 2009
    Сообщения:
    724
    Симпатии:
    314
    Нафиг тут JS?
     

    Вложения:

    • hover.zip
      Размер файла:
      1,6 КБ
      Просмотров:
      23
    bork75 и Extalionez нравится это.
  10. bork75

    bork75 Д☼брая собака )

    Регистр.:
    21 июн 2008
    Сообщения:
    1.449
    Симпатии:
    716
    аха-ха )) вопрос же в разделе JS!
    Просто из моего примера можно доделать всплывающую подсказку.

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

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