Question

我想在我的网站上创建一个效果，我的页面顶部有一个信息容器，作为此特定页面的标题。我的标题＆＃39; item由一些文本和一个相当大的图像组成，但文本可能需要被截断为一定数量的字符。我希望能够单击一个按钮，然后通过展开文本div来覆盖图像，然后展开/滑动以显示未截断的文本

HTML

<div class="container">
    <div id="mytext" class="text"><h1>Lorem ipsum</h1> dolor sit amet, consectetur adipiscing elit. Nunc vestibulum sodales massa ac consectetur. Maecenas eu nisl vel erat pellentesque eleifend ut a est. Nullam ac lorem nisi, eu consequat nisi. In euismod porttitor adipiscing. Aenean feugiat, turpis nec accumsan posuere, diam tellus pharetra arcu, sit amet ultrices magna felis ac elit. Donec sit amet massa nisi, sed semper turpis. Aliquam fringilla vestibulum urna, in tincidunt dui facilisis condimentum. Integer eget enim lectus, id congue ipsum. Sed sit amet ante nec turpis mattis venenatis. In urna quam, cursus vel cursus eu, volutpat eget leo. Praesent in mi diam, vitae tincidunt eros. Etiam feugiat venenatis purus eu cursus. Curabitur euismod, dolor in rhoncus vehicula, leo justo commodo orci, id pulvinar felis purus at lacus. <a href="#" id="expand-div">Expand</a></div>
    <div class="image">Image goes here</div>
</div>

CSS

.container {
    width:500px;
    height:300px;
    border:solid 1px black;
    position:relative;
}

.image {
    background:#00b3f0;
    line-height:300px;
    color:black;
    width:50%;
    text-align:center;
}

.text {
    color:black;
    height:100%;
    position:absolute;
    right:0;
    background:#00DD99;
    max-width:50%;
}

.text a {
    text-decoration:none;
    display:inline-block;
    background:white;
    color:black;
    padding:2px 5px;
}

JQuery的

var expand_btn = document.getElementById('expand-div').outerHTML;

var long_title = document.getElementById('mytext').innerHTML;
var short_title = jQuery.trim(long_title).substring(0, 240).split(" ").slice(0, -1).join(" ") ;

document.getElementById('mytext').innerHTML = short_title + ' - ' +expand_btn;

$("#expand-div").click(function(event) {
    event.preventDefault();
    text_div = $(this).closest('div');
    div_width = parseInt(text_div.css('max-width'));
    if(div_width == 50) {
        $(this).closest('div').animate({"max-width": "100%"}, "slow");
        document.getElementById('expand-div').innerHTML = 'Shrink';
    } else {
        $(this).closest('div').animate({"max-width": "50%"}, "slow");
        document.getElementById('expand-div').innerHTML = 'Expand';
    }
});

I have put together a basic fiddle展示了我所追求的那种效果，但我从来都不是写作JQuery的最佳人选，当我试图在文本之间进行更改时，我可能会犯错误因为它停止了工作。理想情况下，我希望从这个位置动画截断效果，但这不是必需的。

Answer 1

使用css text-overflow属性可以使这更容易。但是，它不适用于某些旧版浏览器。

JQuery截断并显示

1 个答案: