JQuery截断并显示

我正在寻找在我的网站中创建效果，我有一个在我的页面顶部的信息容器，充当此特定页面的标题。我的'标题'项目由一些文本和一个相当大的图像组成，但文本可能需要被截断为一定数量的字符。我希望能够点击一个按钮，并为它再展开/幻灯片通过扩大文本格，覆盖了图像JQuery截断并显示

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时最好，当我试图在文本之间进行切换时，我可能犯了错误，因为它停止了工作。理想情况下，我希望从这个位置开始截断效果的动画，但这不是必需的。

来源

2013-03-20 Andrew Morris

搜索jquery省略号或使用[css]（http://quirksmode.org/css/user-interface/textoverflow.html） – mplungjan 2013-03-20 21:40:27

使用css text-overflow属性应该使这更容易。尽管如此，它在一些较旧的浏览器上不起作用。

来源

2013-03-20 21:41:51 user1618143

请使用更高质量的网站链接到，如http：// quirksmode。 org/css/user-interface/textoverflow.html – mplungjan 2013-03-20 21:43:51

我从来没有听说过这个属性，使用这个我可以改变容器的大小，从我所能看到的它看起来有很好的浏览器兼容性，发生在旧版浏览器中，我是否必须回归正常溢出：隐藏？ – 2013-03-20 21:52:56

优秀！它使用[稍微修改代码]（http://jsfiddle.net/enkV4/2/）工作，但这与我之后的非常相似。谢谢：） – 2013-03-20 22:02:51

JQuery截断并显示

回答

相关问题