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

я всегда использую jquery UI, это легковесно и поддержка Css

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

Код: 
<!doctype html>
 
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>jQuery UI Effects - Show Demo</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
    <link rel="stylesheet" href="/resources/demos/style.css" />
    <style>
    .toggler { width: 500px; height: 200px; }
    #button { padding: .5em 1em; text-decoration: none; }
    #effect { width: 240px; height: 135px; padding: 0.4em; position: relative; }
    #effect h3 { margin: 0; padding: 0.4em; text-align: center; }
    </style>
    <script>
    $(function() {
        // run the currently selected effect
        function runEffect() {
            // get effect type from
            var selectedEffect = $( "#effectTypes" ).val();
 
            // most effect types need no options passed by default
            var options = {};
            // some effects have required parameters
            if ( selectedEffect === "scale" ) {
                options = { percent: 100 };
            } else if ( selectedEffect === "size" ) {
                options = { to: { width: 280, height: 185 } };
            }
 
            // run the effect
            $( "#effect" ).show( selectedEffect, options, 500, callback );
        };
 
        //callback function to bring a hidden box back
        function callback() {
            setTimeout(function() {
                $( "#effect:visible" ).removeAttr( "style" ).fadeOut();
            }, 1000 );
        };
 
        // set effect from select menu value
        $( "#button" ).click(function() {
            runEffect();
            return false;
        });
 
        $( "#effect" ).hide();
    });
    </script>
</head>
<body>
 
<div class="toggler">
    <div id="effect" class="ui-widget-content ui-corner-all">
        <h3 class="ui-widget-header ui-corner-all">Show</h3>
        <p>
            Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
        </p>
    </div>
</div>
 
<select name="effects" id="effectTypes">
    <option value="blind">Blind</option>
    <option value="bounce">Bounce</option>
    <option value="clip">Clip</option>
    <option value="drop">Drop</option>
    <option value="explode">Explode</option>
    <option value="fold">Fold</option>
    <option value="highlight">Highlight</option>
    <option value="puff">Puff</option>
    <option value="pulsate">Pulsate</option>
    <option value="scale">Scale</option>
    <option value="shake">Shake</option>
    <option value="size">Size</option>
    <option value="slide">Slide</option>
</select>
 
<a href="#" id="button" class="ui-state-default ui-corner-all">Run Effect</a>
 
 
</body>
</html>
 
kerubinus написал(а):
я всегда использую jquery UI, это легковесно и поддержка Css
Нажмите для раскрытия...
:confused: капец как легковесно... Если есть jquery то можно так:
PHP: 
<script type="text/javascript">
$(document).ready(function(){
hp=$('p').text();
sp=$('p').text().substr(0,100)+' ...';
$('p').text(sp);
$('p').hover(function(){$(this).text(hp);},function(){$(this).text(sp);} );
});
</script>
 
<p>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.
</p>
 
Войдите или зарегистрируйтесь для ответа.
Назад
Сверху